React Hook useEffect 缺少对 useEffect 的依赖

Question

我一直遇到错误“React Hook useEffect 缺少依赖项”我正在尝试在 React 中保存到本地并且我的应用程序正在运行，但由于此警告我无法部署它。 警告是：**React Hook useEffect 缺少依赖项：'saveLocalTodos'。 要么包含它，要么删除依赖数组 ** 而我的代码是：

 // Run once when the app starts useEffect(() => { getLocalTodos(); }, []); // useEffect useEffect(() => { // Function function filterHandler() { switch (status) { case `completed`: setFilteredTodos(todos.filter((todo) => todo.completed === true)); break; case `uncompleted`: setFilteredTodos(todos.filter((todo) => todo.completed === false)); break; default: setFilteredTodos(todos); break; } } filterHandler(); saveLocalTodos(); }, [todos, status]); // Save to Local const saveLocalTodos = () => { localStorage.setItem("todos", JSON.stringify(todos)); }; const getLocalTodos = () => { if (localStorage.getItem("todos") === null) { localStorage.setItem("todos", JSON.stringify([])); } else { let todoLocal = JSON.parse(localStorage.getItem(`todos`)); setTodos(todoLocal); } };

Answer 1

然后将您的依赖项包含在React.useEffect的依赖项数组中。

您在saveLocalTodos使用saveLocalTodos ， useEffect在依赖项数组中定义它。 通常，经验法useEffect使用的所有内容（函数、变量、状态、道具）都包含在依赖项数组中。 因为您的效果取决于它们，并且一旦它们的值发生变化就应该重新调用自己。

 const saveLocalTodos = React.useCallback(() => {
    localStorage.setItem("todos", JSON.stringify(todos));
  }, [todos]);

  useEffect(() => {
    // Function
    function filterHandler() {
      switch (status) {
        case `completed`:
          setFilteredTodos(todos.filter((todo) => todo.completed === true));
          break;
        case `uncompleted`:
          setFilteredTodos(todos.filter((todo) => todo.completed === false));
          break;
        default:
          setFilteredTodos(todos);
          break;
      }
    }
    filterHandler();
    saveLocalTodos();
  }, [todos, status, saveLocalTodos]);

另外，用React.useCallback包装你的saveLocalTodods ，因为在你的组件的每次重新渲染中，函数引用都会改变。 那么你的效果将无缘无故地被触发。 将todos放在saveLocalTodos内的依赖项数组中。 您希望您的函数仅在待办事项更改时更改。 否则，您将获得陈旧的待办事项。

Answer 2

您收到此错误是因为在useEffect内部，您正在调用在useEffect之外定义的getLocalTodos和saveLocalTodos函数。 理想的情况下内部useEffect依赖性阵列应定义所有的功能外，道具可变等，其将在内部使用useEffect 。 因此，每当依赖项发生任何变化时，都会在useEffect内部触发效果。 当您创建任何函数时，将该函数包装在React.useCallback并且在那里您可以传递该特定函数的依赖项，就像在您的情况下saveLocalTodos依赖于 todos 一样，因此您的函数只会在 todos 更改时更改。 这样，您的功能只会在必要时更改。

      const filterHandler = React.useCallback(() => {
        switch (status) {
            case `completed`:
              setFilteredTodos(todos.filter((todo) => todo.completed === true));
              break;
            case `uncompleted`:
              setFilteredTodos(todos.filter((todo) => todo.completed === false));
              break;
            default:
              setFilteredTodos(todos);
              break;
          }
      }, [todos, status]);
      
      // Save to Local
      const saveLocalTodos = React.useCallback(() => {
        localStorage.setItem("todos", JSON.stringify(todos));
      }, [todos]);
      
      const getLocalTodos = React.useCallback(() => {
        if (localStorage.getItem("todos") === null) {
          localStorage.setItem("todos", JSON.stringify([]));
        } else {
          let todoLocal = JSON.parse(localStorage.getItem(`todos`));
          setTodos(todoLocal);
        }
      },[]);

      useEffect(() => {
        filterHandler();
        saveLocalTodos();
        getLocalTodos();
      }, [getLocalTodos, filterHandler, saveLocalTodos]);