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中使用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]);

此外，用saveLocalTodods包装React.useCallback，因为在每次重新渲染组件时，函数引用都会更改。然后，您的效果将无缘无故被解雇。将todos放在saveLocalTodos内的依赖项数组中。您希望仅在待办事项更改时更改功能。否则，您将获得陈旧的待办事项。

Answer 2

您收到此错误，是因为您在double a(double x) { return area(x,f)+0.5; } double b(double x) { return area(x,f)-0.5; } double rand_normal(void) { double r,x,z; srand(time(NULL)); r = rand() /(double) RAND_MAX if (r>=0.5) { x = newton(1,a,f); z = x; } else if (r<0.5) { x = newton(1,b,f); z = -x; } return z }内调用了useEffect，getLocalTodos函数，这些函数是在useEffect之外定义的。理想情况下，您应该在useEffect依赖关系数组中定义在saveLocalTodos内部使用的所有外部函数，props变量等。因此，只要相关性发生任何变化，效果都会在useEffect内部触发。当您创建任何将函数包装在useEffect内的函数时，您可以传递该特定函数的依赖关系，就像您的情况React.useCallback依赖于待办事项一样，因此仅当待办事项将要执行时，您的函数才会更改更改。这样，您的功能将仅在必要时更改。

saveLocalTodos

React Hook useEffect与useEffect缺少依赖项

2 个答案: