Javascript React Hook useEffect缺少与useEffect的依赖项

我不断出现错误React Hook Useffect缺少一个依赖项，我正试图在React中保存到本地，并且我的应用程序正在工作，但由于此警告，我无法部署它。警告是: **React Hook useEffect缺少依赖项：“saveLocalTodos”。包括它或删除依赖项数组** 我的代码是：

//应用程序启动时运行一次 useEffect=>{ getLocalTodos； }, []; //使用效果 useEffect=>{ //作用 函数滤波器手柄{ 开关状态{ 案例“已完成”： setFilteredTodostodos.filtertodo=>todo.completed==true； 打破 案例“未完成”： setFilteredTodostodos.filtertodo=>todo.completed==false； 打破 违约： 设置FilteredToDostodos； 打破 } } 过滤手； saveLocalTodos； }，[待办事项，状态]； //保存到本地 const saveLocalTodos==>{ localStorage.setItemtodos、JSON.stringifytodos； }; const getLocalTodos==>{ 如果localStorage.getItemtodos===null{ localStorage.setItemtodos，JSON.stringify[]； }否则{ 让todoLocal=JSON.parselocalStorage.getItem`todos`； setTodostodoLocal； }

---

}; 只需将依赖项包含在React.useffect的依赖项数组中即可

您正在useEffect中使用saveLocalTodos，但没有在dependencies数组中定义它。通常，经验法则是将useffect中使用的所有函数、变量、状态和道具都包含在dependencies数组中。因为你的效果取决于它们，一旦它们的值发生变化，你应该重新思考它自己

 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，因为在组件的每次重新呈现中，函数引用都会更改。那么你的效果将被无故发射。将TODO放入SAVELOCALTODO内的依赖项数组中。您希望函数仅在TODO更改时更改。否则，您将过时待办事项。

只需将您的依赖项包含在React.useffect的dependencies数组中即可

您正在useEffect中使用saveLocalTodos，但没有在dependencies数组中定义它。通常，经验法则是将useffect中使用的所有函数、变量、状态和道具都包含在dependencies数组中。因为你的效果取决于它们，一旦它们的值发生变化，你应该重新思考它自己

 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，因为在组件的每次重新呈现中，函数引用都会更改。那么你的效果将被无故发射。将TODO放入SAVELOCALTODO内的依赖项数组中。您希望函数仅在TODO更改时更改。否则，您将获得过时的TODO。

您将获得此错误，因为在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]);

---

出现此错误是因为在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]);

---

问题是linter，删除[]依赖项将使错误消失，如下所示：javascript useffect=>getLocalTodos请参阅以获取进一步参考：。干杯这能回答你的问题吗？我试过了，但没有解决错误。仍然显示相同的错误。问题是linter，删除[]依赖项将使错误消失，如下所示：javascript useEffect=>getLocalTodos请参阅以获取进一步的参考：。干杯这能回答你的问题吗？我试过了，但没有解决错误。仍然显示相同的错误。感谢您的回答！我已经试过了，但现在我有一个错误：saveLocalTodos在定义之前就被使用了。您认为t的原因是什么

---

他现在犯错误了吗？它确实写在您的错误消息中。在使用函数之前定义它。我现在已经更新了代码。检查它。OMGWelcome to programming！哈哈，是的，你可以看出我是个新手！谢谢你的回答！我已经试过了，但现在出现了一个错误：在定义saveLocalTodos之前使用了它。您认为现在出现错误的原因是什么？它确实写在您的错误消息中。在使用函数之前定义它。我现在已经更新了代码。检查它。OMGWelcome to programming！哈哈，是的，你可以看出我是个新手！