React Hook useEffect 缺少依赖项：'loading'。 包括它或删除依赖数组 react-hooks/exhaustive-deps

Question

我该如何解决这个警告？

React Hook useEffect 缺少依赖项：'loading'。 要么包含它，要么删除依赖数组 react-hooks/exhaustive-deps。

  useEffect(() => {
    if (!loading && data) {
      dispatch(action.TODO(data));
    }
  }, [data, dispatch]);

Answer 1

通过在第二个参数数组中指定它，您可以将依赖项添加到useEffect挂钩。

像这样。

useEffect(() => {
  if (!loading && data) {
     dispatch(action.TODO(data));
  }
}, [data, dispatch, loading]);

Answer 2

简短的回答是：在useEffect的第二个参数的数组中删除dispatch并添加loading

正确答案是：当useEffect在其执行内部使用一个变量作为条件时，它认为它是一个依赖，并表明它在被修改时应该再次执行，否则必须从依赖数组中消除

Answer 3

您正在使用useEffect并且您将要经常引用组件中声明为 props 或 state 的一些变量。 您已经在使用data这样做了。 这是您在useEffect function 中引用的 state 的一部分。

loading是一个 prop 或 state 的一部分，当您引用一个 prop 或 state 的一部分时，ESLint 中专门写入了一条规则，希望您在useEffect依赖项数组中引用 state 的任何一个 prop 或一部分。 这控制了useEffect被执行，并且该规则希望在依赖项数组中看到您正在引用的 state 的道具或片段。

useEffect(() => {
  if (!loading && data) {
     dispatch(action.TODO(data));
  }
}, [data, dispatch, loading]);

为什么该规则要我们将loading放在那里？ 在某些情况下，使用useEffect而不是在依赖项中引用 state 的道具或片段可能会导致一些奇怪且难以调试的问题。

因此，该警告旨在帮助您在使用useEffect时避免难以理解的问题。

虽然该规则是出于好意，但任意向依赖项数组添加如此多的规则可能会导致其他错误，这只是需要注意的事情。