在挂载时使用 Effect 依赖警告

Question

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

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

Answer 1

这是由于在您的 useEffect 代码中使用了待办事项，只是一个警告，您可以忽略它或将其添加到依赖项并使用 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]);

Answer 2

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

https://usehooks.com/useLocalStorage/

Answer 3

并非所有的警告都应该被忽略，但这个可以，所以只需在您的代码中添加该注释，它就会删除该行的警告。

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
  }, []);

在挂载时使用 Effect 依赖警告

use Effect dependency warning on mounting

reactjs

use-effect