Estoy trabajando con persistencia en una aplicación de tareas pendientes escrita con React y TypeScript. Estoy usando localStorage para obtener la persistencia que quiero.
Déjame mostrarte un código.
const [todos, setTodos] = useState<todoModel[]>([]); useEffect(() => { localStorage.setItem("todoItem", JSON.stringify(todos)); }, [todos]) const storesTodos = () => { const storedValues = localStorage.getItem("todoItem"); if(!storedValues) { return todos; } return JSON.parse(storedValues); } useEffect(() => { getToDoList(); storesTodos(); console.log("default") }, []) useEffect(() => { if (!props.reload) return; console.log(props.reload) getToDoList(); storesTodos(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [props.reload]) Estoy agregando la función StoresTodo() en mi useEffects, probé ambos. Pero no funcionará. Obtengo los datos en mi almacenamiento local, pero cuando vuelvo a cargar la página, vuelve a los valores predeterminados.
¿Que me estoy perdiendo aqui?
Parece que está obteniendo el mismo valor inicial porque nunca actualiza todos , a juzgar por el código compartido.
Puedes hacerlo
... const storesTodos = () => { const storedValues = localStorage.getItem("todoItem"); if(!storedValues) { setTodos(todos) return todos; } return JSON.parse(storedValues); }O puede usar un enlace de estado de almacenamiento local desde aquí
function useLocalStorageState({ key, initialValue, serialize = v => v, deserialize = v => v, }) { const [state, setState] = React.useState( () => deserialize(window.localStorage.getItem(key)) || initialValue, ) const serializedState = serialize(state) React.useEffect(() => { window.localStorage.setItem(key, serializedState) }, [key, serializedState]) return [state, setState] }Cuando actualiza la página, incluso antes de que useEffect se establezca
const [todos, setTodos] = useState<todoModel[]>([]);ya configurará su conjunto inicial de todos en un conjunto vacío.
Quizás deba realizar la verificación en localStorage de esta manera
const [todos, setTodos] = useState<todoModel[]>(() => { const storedValues = localStorage.getItem("todoItem"); return storedValues ? JSON.parse(storedValues) : []; });