Блог

Я использую хуки useState и в качестве состояния по умолчанию использую пустой массив. Проблема только в состоянии filteredList, когда я загружаю страницу, мое состояние равно null вместо пустого массива. Если я задаю пустой объект или просто строку, то он показывает реальное состояние по умолчанию, но если я помещаю туда массив со значениями, то сначала он регистрирует правильный массив, а затем превращается в пустой архив. Странно то, что он отлично работал несколько дней назад, когда я его писал, поэтому я не знаю, является ли это причудой или проблемой… Вот мой код:

 export default function App() {
  const [inputText, setinputText] = useState("");
  const [todos, setTodos] = useState([]);
  const [filterStatus, setFilterStatus] = useState("all");
  const [filteredList, setFilteredList] = useState([]);

  useEffect(() => {
     getLocalTodos();
  }, [])

  useEffect(() => {
     filterHandler();
     saveLocalTodos();
  }, [todos, filterStatus]);

  const filterHandler = () => {
     switch (filterStatus) {
        case "completed":
           setFilteredList(todos.filter(todo => todo.completed === true));
           break;
        case "uncompleted":
           setFilteredList(todos.filter(todo => todo.completed === false));
           break;
        default:
           setFilteredList(todos);
           break;
        }
   }

   const saveLocalTodos = () => {
     localStorage.setItem('todos', JSON.stringify(todos));
   }

   const getLocalTodos = () => {
     setTodos(JSON.parse(localStorage.getItem('todos')));
   }
  

А остальное — возврат..

Я думаю, что проблема в:

 const getLocalTodos = () => {
  setTodos(JSON.parse(localStorage.getItem('todos')));
}
  

Проверьте значение, сохраненное в ключе ‘todos’ в localStorage