Actualmente estoy creando un componente de lista de historial para un formulario en una aplicación de reacción y tengo algunos problemas con el almacenamiento local.
Esencialmente, quiero que la aplicación muestre una lista de entradas anteriores de los datos de almacenamiento local del usuario. Mi idea actual se basa en duplicar los datos de almacenamiento local en una variable de estado.
const [history, setHistory] = useState([]);En el envío del formulario, llamo a esta función con la entrada del formulario como parámetro (la entrada es una sola cadena)
const setLocalStorage = (input) => { const hist = JSON.parse(localStorage.getItem('history')) || []; console.log(hist) hist.push(input) localStorage.setItem('history', JSON.stringify(hist)) setHistory(hist); } Esto está destinado a colocar el historial de la historia local en hist , insertar la entrada que acaba de enviarse en la matriz existente hist y actualizar el almacenamiento local con el nuevo valor. Luego, la variable de estado debe actualizarse con la matriz de cadenas más actualizada con la setHistory(hist) .
Además, quiero que se extraiga el almacenamiento local en el primer renderizado para poder usar esos datos para renderizar la lista del historial en la carga inicial. Tengo un gancho useEffect para esto como se muestra:
useEffect(() => { setHistory(JSON.parse(localStorage.getItem('history'))) console.log(history) }, []); El problema al que me enfrento es que el estado nunca parece actualizarse. En su lugar, puedo hacer un registro de consola para JSON.parse(localStorage.getItem('history')) y recuperar la matriz de almacenamiento local, pero esto, por supuesto, no es útil para el uso de datos. Sé que el almacenamiento local se extrae correctamente de esto, pero no puedo actualizar el estado por algún motivo. Necesito que se actualice el estado para poder representar y usar condicionalmente la matriz para mapear cada elemento en la lista de historial. Cuando registro "historial" en la consola, obtengo una matriz vacía.
TL;RD
De manera concisa, ¿cuál es el método más limpio para que el almacenamiento local y los valores estatales mantengan la equivalencia? ¡Espero que mi publicación haya sido lo suficientemente clara para entender!
Estoy rehaciendo y actualizando una aplicación JS regular en React para practicar, así que puedo proporcionar un enlace en vivo de cómo quiero que funcione este componente simple.
El segundo parámetro devuelto de useState es similar a this.setState que es asíncrono. Puede ver que el estado no cambia incluso si se llama a setHistory . Pasar la función en lugar del valor evitará este problema, ya que se ejecutará después de que se actualice el estado. Esto podría ser útil para comprender mejor la función Pasar a setState()
useEffect(() => { const hist = JSON.parse(localStorage.getItem('history')) setHistory(prevHistory => [...prevHistory, ...hist]) }, []);