React useState 不会从本地存储更新

Question

当我尝试使用 setTodos(storedTodos) 时，它只是重置数组。如果我用 const [todos, setTodos] = useState(JSON.parse(localStorage.getItem('todos'))); 替换 const [todos, setTodos] = useState([]); 它可以工作，但只有当数组中已经有数据时，所以当我第一次清除站点数据或打开页面时它才会崩溃。

这是我的完整代码：

import './App.css';

import Form from './components/Form.js';
import ToDoList from './components/ToDoList';


function App() {

  //States
  const [inputText, setInputText] = useState("");
  const [inputTime, setInputTime] = useState("");
  const [todos, setTodos] =  useState([]);   //(JSON.parse(localStorage.getItem('todos')));
  const [status, setStatus] = useState("all");
  const [filteredTodos, setFilteredTodos] = useState ([]);

  useEffect(() => {
    var storedTodos = JSON.parse(localStorage.getItem('todos'));
    setTodos(storedTodos);
  }, []);

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

  //Functions
  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 getLocalTodos = () => {
  var storedTodos = JSON.parse(localStorage.getItem('todos'));
  setTodos(storedTodos);
};

//save the list localy
const saveLocalTodos = () => {
  console.log("save");
  console.log(todos);
   localStorage.setItem('todos', JSON.stringify(todos));
   console.log(todos);
};

  return (
    <div className="App">
      <Form 
        inputText={inputText}
        inputTime={inputTime}
        setInputText={setInputText}
        setInputTime={setInputTime}

        todos={todos} 
        setTodos={setTodos}  
        setStatus={setStatus}
      />
      <ToDoList 
        setTodos={setTodos} 
        todos={todos}
        filteredTodos={filteredTodos}
      />
    </div>
  );
}

export default App;```

Answer 1

使用逻辑或运算符试试这个方法。

const [todos, setTodos] = useState(JSON.parse(localStorage.getItem('todos')) || []);

React useState 不会从本地存储更新

React useState doesnt update from localstorage

reactjs

react-hooks

local-storage

use-state