Question

我在上下文 API 中有一个用于状态管理的 reducer。我正在保存我的 Todos 并且它成功发生，但是当我刷新页面时，所有 todos 都被删除并且只保留空数组。

// The relevant part in the reducer.
case "TODO_ADD_USER":
      return {
        ...state,
        users: action.payload,
      };

// Localstorage functions.
useEffect(() => {
    saveLocalTodos();
  }, [state]);

  useEffect(() => {
    const localTodos = getLocalTodos();
    dispatch({ type: "TODO_ADD_USER", payload: localTodos });
  }, []);

  const saveLocalTodos = () => {
    if (localStorage.getItem("users") === null) {
      localStorage.setItem("users", JSON.stringify([]));
    } else {
      localStorage.setItem("users", JSON.stringify(state.users));
    }
  };

  const getLocalTodos = () => {
    let locals;
    if (localStorage.getItem("users") === null) {
      locals = [];
    } else {
      locals = JSON.parse(localStorage.getItem("users"));
    }
    return locals;
  };

Place of keeping the state.
const users = {
  users: [],
};

Answer 1

您的代码存在一些问题。

这里最大的问题是您在获取待办事项之前先保存它们。所以在应用程序开始时，事情正在重置，这是有问题的。

接下来，您有向后保存的条件。您想检查 if state.users === null 并为此执行特殊操作，而不是 if localStorage.getItem("users") === null，因为默认情况下它将为 null，并且与内存中的值无关。

实际上，如果localStorage的值不为null，而state.users为null，那么它会将"null"设置为localStorage，这是不太理想的。

这是工作代码：

  useEffect(() => {
    // Get the item from local storage. JSON.parse(null) returns null rather than throws
    // Get from local storage before setting it
    const localTodos = JSON.parse(localStorage.getItem("users")) || [];
    dispatch({ type: "TODO_ADD_USER", payload: localTodos });
  }, []);

  useEffect(() => {
    // The conditions for this was wrong.
    // You want to check if `state.users` has a value
    // If it does, store! If not, don't store.
    // That way you don't reset data
    // In the case that you have this app running in two windows,
    // there's more that needs to be done for that.
    if (state.users) {
      localStorage.setItem("users", JSON.stringify(state.users || []));
    }
  }, [state]);

https://codesandbox.io/s/angry-glitter-9l10t?file=/src/App.js

为什么刷新页面时本地存储被删除？

1 个答案: