React Hook useEffect 缺少对 useEffect 的依赖 [英] React Hook useEffect has a missing dependency with useEffect

问题描述

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

I keep having the error "React Hook useEffect has a missing dependency" I am trying to Save to Local in React and my app is working, but I cannot deploy it because of this warning. The warning is: **React Hook useEffect has a missing dependency: 'saveLocalTodos'. Either include it or remove the dependency array ** And my code is:

// 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);
    }
  };

推荐答案

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

Just include your dependency in the dependencies array of React.useEffect then.

您在 useEffect 中使用了 saveLocalTodos，但没有在依赖项数组中定义它.通常，经验法则是将 useEffect 中使用的所有内容(函数、变量、状态、道具)都包含在依赖项数组中.因为你的效果取决于它们，一旦它们的值发生变化就应该重新调用自己.

You're using saveLocalTodos inside your useEffect but not defining it in the dependencies array. Normally, the rule of thumb is to include everything (functions, variables, state, props) which is used inside the useEffect to be in the dependencies array. Because your effect depends on them and should reinvoke itself once their value changes.

 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 内的依赖项数组中.您希望您的函数仅在待办事项更改时更改.否则，您将获得陈旧的待办事项.

Also, wrap your saveLocalTodods with React.useCallback because, in every re-render of your component, the function reference changes. Then your effect will be fired for no reason. Put todos in the dependencies array inside the saveLocalTodos. You want your function to change only when todos change. Otherwise, you will get stale todos.

这篇关于React Hook useEffect 缺少对 useEffect 的依赖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！