Esto parece poco común. Estoy intentando simplemente configurar el estado en el montaje, pero se me queda en blanco.
const [info, setState] = useState({ user_1: '', user_2: '', }); useEffect(() => { var personal_1 = window.localStorage.getItem('personal_1'); var personal_2 = window.localStorage.getItem('personal_2'); console.log(personal_1); if (personal_1 !== null && personal_2 !== null) { console.log('Make it easy') setState({ ...info, user_1: personal_1, user_2: personal_2 }) } }, []) useEffect(() => { console.log('User personal_1 was changed to', info.user_1); }, [info.user_1])Cuando registro los efectos del montaje de este componente, muestra
personal_1 Make it easy User personal_1 was changed toPor alguna razón, en lugar de configurar el estado en el montaje al valor del almacenamiento local, simplemente se queda en blanco. Pensé que probablemente se estaba volviendo a dejar en blanco en algún otro lugar del componente, pero el enlace info.personal_1 solo se llama una vez. ¿Alguien sabe por qué podría estar configurando el elemento de almacenamiento local, pero luego se queda en blanco cuando el elemento de almacenamiento es una cadena normal?
Esto sucede porque no está setting correctamente los valores de almacenamiento local. Por lo tanto, el valor de esos artículos siempre estará en blanco.
Puede usar directamente el enlace React personalizado ( useLocalStorage ) que proporciono a continuación para obtener y configurar elementos de su almacenamiento local en su aplicación web
Gancho
import { useCallback, useState, useEffect } from "react" // To use local storage to store, update info export function useLocalStorage(key, defaultValue) { return useStorage(key, defaultValue, window.localStorage) } // Common code being used irresp of storage type -> local or session function useStorage(key, defaultValue, storageObject) { // Set the "value" (in this hook's state, and return it to the component's state as well) to be the value at passed "key" in storage. // Else, we set it to the defaultValue (which can be a value or a func returning a val) const [value, setValue] = useState(() => { const jsonValue = storageObject.getItem(key) if (jsonValue != null) return JSON.parse(jsonValue) if (typeof defaultValue === "function") { return defaultValue() } else { return defaultValue } }) // To set a value in the storage using key-val pair useEffect(() => { if (value === undefined) return storageObject.removeItem(key) storageObject.setItem(key, JSON.stringify(value)) }, [key, value, storageObject]) // To remove value at given key const remove = useCallback(() => { setValue(undefined) }, []) return [value, setValue, remove] }Usando el gancho en un componente:
import { useLocalStorage } from "./useStorage" export default function StorageComponent() { const [age, setAge, removeAge] = useLocalStorage("age", 26) return ( <div> <div> {age} </div> <button onClick={() => setAge(40)}>Set Age</button> <button onClick={removeAge}>Remove Age</button> </div> ) }en la segunda dependencia useEffect solo agregue información como esta:
useEffect(() => { if(info.user_1){ console.log('User personal_1 was changedto',info.user_1); } }, [info])