localStorage 正在保存我的数据，但在刷新后重置并清空它答案

【问题标题】：localStorage is saving my data but after refresh is reseting and empty itlocalStorage 正在保存我的数据，但在刷新后重置并清空它
【发布时间】：2022-08-09 20:36:17
【问题描述】：

我有一个问题，我需要你帮助我理解它。我正在使用 ReactJS，并且正在构建一个简单的 CRUD Todo 应用程序。我想将我的待办事项存储在本地存储中。数据保存在那里，我可以看到它，但刷新后它正在清空我的本地存储。

我究竟做错了什么？我注意到，从我第一次打开应用程序（第一次渲染）开始，本地存储就在创建存储空间而不添加待办事项。

我是否可能错过了代码中的某些内容，使其在页面呈现时重置或清空？

import React, { useState, useEffect } from \"react\";
import { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";
import {
  faCheck,
  faPen,
  faPlus,
  faTrashCan,
} from \"@fortawesome/free-solid-svg-icons\";
import \"./App.css\";
import { faCircleCheck } from \"@fortawesome/free-regular-svg-icons\";

function App() {
  const [todos, setTodos] = useState([]);
  const [todo, setTodo] = useState(\"\");

  const [todoEditing, setTodoEditing] = useState(null);
  const [editingText, setEditingText] = useState(\"\");

  useEffect(() => {
    const json = window.localStorage.getItem(\"todos\");
    const loadedTodos = JSON.parse(json);
    if (loadedTodos) {
      setTodos(loadedTodos);
    }
  }, []);

  useEffect(() => {
    const json = JSON.stringify(todos);
    window.localStorage.setItem(\"todos\", json);
  }, [todos]);

  function handleSubmit(e) {
    e.preventDefault();

    const newTodo = {
      id: new Date().getTime(),
      text: todo,
      completed: false,
    };

    setTodos([...todos].concat(newTodo));
    setTodo(\"\");
  }

  function deleteTodo(id) {
    const updatedTodos = [...todos].filter((todo) => todo.id !== id);
    setTodos(updatedTodos);
  }

  function toggleComplete(id) {
    let updatedTodos = [...todos].map((todo) => {
      if (todo.id === id) {
        todo.completed = !todo.completed;
      }
      return todo;
    });
    setTodos(updatedTodos);
  }

  function submitEdits(id) {
    const updatedTodos = [...todos].map((todo) => {
      if (todo.id === id) {
        todo.text = editingText;
      }
      return todo;
    });
    setTodos(updatedTodos);
    setTodoEditing(null);
  }

  return (
    <div className=\"App\">
      <div className=\"app-container\">
        <div className=\"todo-header\">
          <form onSubmit={handleSubmit}>
            <input
              type=\"text\"
              name=\"todo-input-text\"
              placeholder=\"write a todo...\"
              onChange={(e) => {
                setTodo(e.target.value);
              }}
              value={todo}
            />
            <button>
              <FontAwesomeIcon icon={faPlus} />
            </button>
          </form>
        </div>
        <div className=\"todo-body\">
          {todos.map((todo) => {
            return (
              <div className=\"todo-wrapper\" key={todo.id}>
                {todo.id === todoEditing ? (
                  <input
                    className=\"edited-todo\"
                    type=\"text\"
                    onChange={(e) => setEditingText(e.target.value)}
                  />
                ) : (
                  <p className={todo.completed ? \"completed\" : \"uncompleted\"}>
                    {todo.text}
                  </p>
                )}
                <div className=\"todo-buttons-wrapper\">
                  <button onClick={() => toggleComplete(todo.id)}>
                    <FontAwesomeIcon icon={faCircleCheck} />
                  </button>
                  {todo.id === todoEditing ? (
                    <button onClick={() => submitEdits(todo.id)}>
                      <FontAwesomeIcon icon={faCheck} />
                    </button>
                  ) : (
                    <button onClick={() => setTodoEditing(todo.id)}>
                      <FontAwesomeIcon icon={faPen} />
                    </button>
                  )}
                  <button
                    onClick={() => {
                      deleteTodo(todo.id);
                    }}
                  >
                    <FontAwesomeIcon icon={faTrashCan} />
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

export default App;

我在这里尝试了代码，它工作正常，有一个不良副作用，因为你的第二个效果在第一次渲染时擦除了存储，但是第一个效果已经检索了这个值，所以一旦它设置回来，你的第二个效果就会重新执行和 localStorage 重新更新：stackblitz.com/edit/react-gkpfsd?file=src%2FApp.js。我添加了一个超时，所以如果你检查 localStorage 选项卡，你会看到 2000 毫秒它被设置为一个空数组。那是在第一个效果将先前检索到的值保存在状态之前，然后重新执行第二个效果。
这真的很有帮助，谢谢你！

标签： reactjs local-storage local

【解决方案1】：

如果它们在 localStorage 中可用，则应该从组件挂载上的 localStorage 加载待办事项，

const loadedTodos = localStorage.getItem("todos")
  ? JSON.parse(localStorage.getItem("todos"))
  : []; // new

const [todos, setTodos] = useState(loadedTodos); // updated

然后你不必在useEffect 中使用 setTodos(loadedTodos) 来改变状态。

只需从代码中删除这个 useEffect ：

// that useEffect should be removed
useEffect(() => {
    const json = window.localStorage.getItem("todos");
    const loadedTodos = JSON.parse(json);
    if (loadedTodos) {
      setTodos(loadedTodos);
    }
  }, []);

您也可以在工作中的CodeSandbox 中检查这一点。

【讨论】：

【解决方案2】：

我认为您的第二个 useEffect 导致它重置。

将 useEffect 逻辑移至单独的函数。

而不是调用setTodos，而是调用该函数，更新存储，然后从该函数调用setTodos。

【讨论】：

这就是问题所在，现在我明白了。谢谢您的帮助！

【解决方案3】：

如果您使用回调函数和扩展运算符调用 setTodos 函数，它应该可以工作：

useEffect(() => {
const json = window.localStorage.getItem("todos");
const loadedTodos = JSON.parse(json);
if (loadedTodos) {
// set local storage like this
  setTodos( prevTodos => [...prevTodos, ...loadedTodos] ); 
}}, []);

【讨论】：