React Hook useEffect有一个缺失的依赖项："加载"。要么包含它，要么删除依赖数组 react-hooks/exhaustive-deps

Question

如何修复此警告？

React Hook useEffect缺少依赖项："loading"。要么包括它，要么删除依赖数组react hook/exhaust 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函数中引用的一段状态。

loading要么是一个道具，要么是一段状态，当您引用道具或一段状态时，ESLint中专门写入了一条规则，希望您引用useEffect依赖数组中的任何道具或状态。它控制何时执行useEffect，并且该规则希望在依赖数组中列出您正在引用的道具或状态。

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

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

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

虽然该规则是善意的，但任意向依赖数组中添加这么多规则可能会导致其他错误，这只是需要注意的。