来自数据库的GET请求冲走了localStorage

Question

我目前正在构建“To Do”网络应用程序，使用ReactJS作为前端，Django作为后端，并使用axios来获取请求。 我希望我的应用程序中有一个功能，可以在用户更新“待办任务”时将其存储在本地，并且在浏览器刷新或意外退出时不会丢失它。

我正在使用 hooks 和 useEffect 在本地存储数据。每当浏览器刷新时，本地数据就会被数据库清洗。这是我的代码片段。或者您可以查看代码这里

const [taskEdits, setTaskEdits] = useState({});

useEffect(() => {
    const storedEdits = JSON.parse(localStorage.getItem("taskEdits")) || {};
    axios
    .get("/tasks/")
    .then((res) => {
        const fetchedTasks = res.data;
        const mergedTasks = fetchedTasks.map((task) => {
                if (storedEdits[task.id]) {
            return { ...task, title: storedEdits[task.id] };
        }
        return task;
        });

        setTasks(mergedTasks);
    })
    .catch((err) => console.error("Error fetching tasks:", err));
}, []);

useEffect(() => {
   localStorage.setItem("taskEdits", JSON.stringify(taskEdits));
}, [taskEdits]);

Answer 1

数据丢失可能是由于刷新时重置

state

。在

mount

上，您的

useEffect

然后运行并将您的

localStorage

值设置为现在的空状态。

也许你可以尝试改变你的状态逻辑：

const [taskEdits, setTaskEdits] = useState(() => {
    return JSON.parse(localStorage.getItem("taskEdits")) || {};
});