Estoy haciendo un Todolist simple en react.js. Hasta ahora puedo guardar mis objetos en LocalStorage, pero cuando actualizo la página, los elementos Todo desaparecen.
import React, { useState,useEffect } from 'react' import TodoList from './TodoList.jsx' const AddTodo = () => { const [newTodo, setNewTodo] = useState('') const [list, setList] = useState([]) const handleSubmit = () => { const todoItem = { id:Math.floor(Math.random() * 10000), value:newTodo } if(todoItem){ setList([...list,todoItem]) setNewTodo('') } /*gets the oldlist and whats inside of it and adds the new item */ console.log(list) } useEffect(() => { localStorage.setItem("list", JSON.stringify(list)); }, [list]) useEffect(() => { const data = JSON.parse(localStorage.getItem('list')); if(data){ setList(data) } }, []) return ( <div className="input_container"> <form onSubmit={(e) => e.preventDefault()}> <input type="text" onChange={e => setNewTodo(e.target.value)} className="todo-input" placeholder="Write Todo.." value={newTodo} name="text"/> <button onClick={() => handleSubmit()} className="add-todo-button"> Add Todo </button> </form> <TodoList list={list} newTodo={newTodo}/> </div> ) } export default AddTodoDebe obtener la lista de tareas del almacenamiento local en su estado cuando crea el estado. Cada vez que la página se actualice, obtendrá el estado inicial del almacenamiento local. Si tuviera algo diferente, lo establecerá en [] así.
const [newTodo, setNewTodo] = useState('') const [list, setList] = useState(JSON.parse(localStorage.getItem("list")) || [])Esta es una mejor manera de hacerlo.
La parte de abajo no es útil.
useEffect(() => { localStorage.setItem("list", JSON.stringify(list)); }, [list])Cuando se monta la página, establecerá localStorage como [] porque establece [] como valor predeterminado de la lista. Aquí está mi solución para ayudarte.
const [list, setList] = useState(JSON.parse(localStorage.getItem("list")) || []) const handleSubmit = () => { const todoItem = { id:Math.floor(Math.random() * 10000), value:newTodo } if(todoItem){ setList([...list,todoItem]) setNewTodo('') } /*gets the oldlist and whats inside of it and adds the new item */ console.log(list) // Store the value in localStorage localStorage.setItem("list", JSON.stringify(list)); }https://reactjs.org/docs/hooks-effect.html
Sería útil si pudieras echarle un vistazo al useEffect de nuevo
Este efecto
useEffect(() => { localStorage.setItem("list", JSON.stringify(list)); }, [list])se ejecutará cada vez que se monte el componente. Lo que significa que tan pronto como se monte, el efecto se ejecutará y borrará el valor almacenado en localStorage.
Establecer su valor localStorage dentro de su controlador de eventos (es decir, handleSubmit) en lugar de usar un efecto es un enfoque mucho mejor aquí.
const handleSubmit = () => { const todoItem = { id:Math.floor(Math.random() * 10000), value:newTodo } if(todoItem){ setList([...list,todoItem]) setNewTodo('') } /*gets the oldlist and whats inside of it and adds the new item */ console.log(list) // Store the value in localStorage localStorage.setItem("list", JSON.stringify(list)); }