本地存储开始为空

Question

我正在使用 React 做一个待办事项列表，我的 localStorage 将项目保存在 localStorage 的数组中，但是当我刷新页面时，它是空的。

const SAVED_ITEMS = "savedItems";

function Todo() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    let savedItems = JSON.parse(localStorage.getItem(SAVED_ITEMS));
    if (savedItems) {
      setItems(savedItems);
    }
  }, []);

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

Answer 1

在初始渲染时，所有

useEffect

都会调用它们初始化时使用的设置函数。对设置函数的进一步调用取决于依赖项数组中反应值的变化。 ^{[反应文档]}

这意味着以下代码在初始渲染时运行：

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

这意味着在初始渲染时，

items

是

[]

，并且以这种方式保存到存储中。

---

为了防止对您的设置函数进行初始调用，请考虑这个 stackoverflow 问题 以及提供的答案。