reactjs - 为什么每次刷新页面时 localStorage 都会被清除？

Question

如标题所说，我设置的 localStorage 注册了对 todoList 数组所做的更改，并对其进行了 JSON.stringify；但是，每当我刷新页面时，数组都会返回到默认的 [] 状态。

const LOCAL_STORAGE_KEY = "task-list"

function TodoList() {
    const [todoList, setTodoList] = useState([]);

    useEffect(() => {
        const storedList = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
        if (storedList) {
            setTodoList(storedList);
        }
    }, []);
    
    useEffect(() => {
        localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todoList));
    }, [todoList]);

Answer 1

当您重新加载应用程序/组件时，两种效果都会运行，并且 React 状态更新是异步处理的，因此它会在处理状态更新之前获取持久保存到 localStorage 的空数组状态。设置初始todoList状态值时直接从localStorage中读取即可。

例子:

const LOCAL_STORAGE_KEY = "task-list"

function TodoList() {
  const [todoList, setTodoList] = useState(() => {
    return JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) || []
  });
    
  useEffect(() => {
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(todoList));
  }, [todoList]);

  ...