在第一次渲染时对 localStorage 空数组和 null 做出反应

如何解决在第一次渲染时对 localStorage 空数组和 null 做出反应

我尝试使用 localStorage，但遇到了一些令我感到困惑的事情。

1. 当我尝试在 localStorage 添加第一个任务时，它不会保存任务对象，而是一个空数组，只有在添加第二个任务后，它才开始保存对象任务？

2. 由于我的第一点不知何故无法正常工作，第二个问题是现在当我手动清理 localStorage 并刷新页面时，我遇到了一个空错误。

如果有人能给我一些关于它的见解，这里是下面的代码。谢谢

const SearchInput = () => {
  const [taskValue,setTaskValue] = useState("");
  const [allTasks,setAllTasks] = useState([]);

  useEffect(() => {
    const persistedTasks = JSON.parse(localStorage.getItem("tasks"));
    setAllTasks(persistedTasks);
    console.log(persistedTasks);
  },[]);

  const handleChange = (e) => {
    setTaskValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (taskValue !== "") {
      setAllTasks([
        ...allTasks,{ id: allTasks.length + 1,text: taskValue.trim() },]);
    }
    localStorage.setItem("tasks",JSON.stringify(allTasks));
    setTaskValue("");
  };

  return (
    <>
      <Form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Add a task..."
          value={taskValue}
          onChange={handleChange}
        />
        <button>Submit the Task</button>
      </Form>
      <TasksContainer>
        {!allTasks.length && <p>No tasks</p>}
        {!!allTasks.length && (
          <ul>
            {allTasks.map((task) => (
              <TaskWrapper key={task.id}>
                <li>{task.text} </li>
                <div>
                  <button>Edit</button>
                  <button>Delete</button>
                </div>
              </TaskWrapper>
            ))}
          </ul>
        )}
      </TasksContainer>
    </>
  );
};