React Hook useEffect 缺少与 useEffect 的依赖关系

Question

我正在尝试在 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 的依赖项数组中即可。

您在 useEffect 中使用了 saveLocalTodos，但未在依赖项数组中定义它。通常，经验法则是将 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 中使用的所有外部函数、props 变量等。因此，每当依赖项发生任何变化时，都会在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]);