Estoy creando una aplicación TODO usando React JS. El elemento no se guarda con React JS. Busque el fragmento de código del archivo App.js a continuación que contiene las funciones de guardar elementos en el almacenamiento local y obtener elementos del almacenamiento local.

Después de actualizar la página, los datos desaparecen de la interfaz de usuario y del almacenamiento local.

 import React,{useState,useEffect} from 'react'; import './App.css'; import Form from './components/Form' import TodoList from './components/TodoList' function App() { const [inputText,setInputText]=useState(""); const [todos,setTodos]=useState([]); const [status,setStatus]=useState(''); const [filteredTodos,setFilteredTodos]=useState([]) useEffect(()=>{ const getLocalTodos=()=>{ if(localStorage.getItem('todos')===null){ localStorage.setItem('todos',JSON.stringify([])); } else{ let todoLocal = JSON.parse(localStorage.getItem('todos')) setTodos(todoLocal); } } getLocalTodos(); },[]); useEffect(()=>{ const filterHandler=()=>{ switch(status){ case 'completed': setFilteredTodos(todos.filter(todo=>todo.completed===true)) break; case 'uncompleted': setFilteredTodos(todos.filter(todo=>todo.completed===false)) break; default: setFilteredTodos(todos) break; } } const saveLocalTodos=()=>{ localStorage.setItem("todos",JSON.stringify(todos)) } filterHandler() saveLocalTodos() console.log('hey'); },[todos,status]) return ( <div className="App"> <header> <h1>TODO List </h1> </header> <Form todos={todos} setTodos={setTodos} inputText={inputText} setInputText={setInputText} setStatus={setStatus} /> <TodoList setTodos={setTodos} todos={todos} filteredTodos={filteredTodos} /> </div> ); } export default App;