在安装时使用效果依赖警告答案

【问题标题】：use Effect dependency warning on mounting在安装时使用效果依赖警告
【发布时间】：2022-01-20 17:18:39
【问题描述】：

我只想在页面渲染上使用一次useEffect，但它会警告我将todos 作为参数添加到我的effect，如果我这样做，它将在@987654326 时每次运行@状态正在改变。我该如何解决？

  useEffect(() => {
    if (localStorage.getItem("todos") === null) {
      localStorage.setItem("todos", JSON.stringify([]));
    } else {
      let localTodos = localStorage.getItem("todos", JSON.stringify(todos));
      console.log(localTodos);
    }
  }, []);

【问题讨论】：

什么会发出警告？你能显示警告信息吗？
@Stanley 编辑了我的问题。现在你可以看到图片了
为什么不希望它在每次 todos 更改时运行？你能发布你的整个组件吗？你用 localTodoes 做什么？

标签： reactjs use-effect

【解决方案1】：

并非所有警告都应被忽略，但可以忽略，因此只需在代码中添加该注释即可删除该行的警告。

useEffect(() => {
    if (localStorage.getItem("todos") === null) {
      localStorage.setItem("todos", JSON.stringify([]));
    } else {
      let localTodos = localStorage.getItem("todos", JSON.stringify(todos));
      console.log(localTodos);
    }
 // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

【讨论】：

【解决方案2】：

这是由于在你的 useEffect 代码中使用了 todos，只是一个警告，你可以忽略它或将它添加到依赖项并使用 if 语句

useEffect(() => {
if (your condition to run this code once){
    if (localStorage.getItem("todos") === null) {
      localStorage.setItem("todos", JSON.stringify([]));
    } else {
      let localTodos = localStorage.getItem("todos", JSON.stringify(todos));
      console.log(localTodos);
    }
}
  }, [todos]);

【讨论】：

我能做些什么来消除那个警告吗？我对这些事情很着迷
包含它并使用 if 语句检查 todods 是否需要更新
我该怎么做？
我的答案已更新，请查看
正如 OP 所写，他不会在每次 todos 更改时触发它。

【解决方案3】：

您可以使用自定义 useLocalStorage 挂钩。与 useState 类似，但如果提供的本地存储密钥存在，它将从本地存储中获取其初始状态。

https://usehooks.com/useLocalStorage/

【讨论】：