当我尝试使用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;```