Javascript 设计反应挂钩防止反应挂钩/详尽的deps警告

我正在设计一个钩子，仅当钩子依赖项发生变化时才获取数据它按预期工作但我收到了林特警告：

React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.

及

据我所知，我不想在依赖项中使用所有这些变量，因为我不想在这些变量发生变化时触发这个钩子，我只想在我传递的依赖项发生变化时触发它

问题： 如何设计代码> UEFETCHE（）/<代码>挂钩，方法与钩子链接标准一致（如果我的设计模式不符合标准，请详细说明如何实现这一点）。 我的

useFetch（）

hook

function useFetch(
    {
        route,
        data = {},
        successHandler,
        errorHandler,
    },
    dependencies = []) {
    const [loading, setLoading] = useState(true);
    useEffect(() => {
        setLoading(true);
        postJson({route}, data)
            .then(
                res => {
                    if(isFunction(successHandler)) successHandler(res);
                },
                ({responseJSON: err}) => {
                    if(isFunction(errorHandler)) {
                        errorHandler(err);
                    } else {
                        notify({text: err.message || messages.saveFailed(), cssClass: 'error'});
                    }
                }
            )
            .finally(() => {
                setLoading(false);
            });
    }, dependencies);
    return loading;
}

使用

useFetch（）的组件

函数MyComponent（{data，selectedReviewId，setField}）{
const load=useFetch({
路由：“foo.fetchData”，
数据：{crrType，clientId，programId，userId}，
successHandler:d=>setField（[]，d）//setField（）将使用useFetch（）中获取的值设置数据
}，[selectedReviewId]）；
返回加载？：{data.foo}；
}
eslint

警告是正确的-您应该将它们作为依赖项包括在内。例如，在您的

MyComponent

中，如果

data

发生更改，并且它不在您的依赖项列表中，您的

useffect

钩子将调用fetch-will-outleted

data

这同样适用于其他人-建议将这些添加到您的依赖项列表中

对于第一个错误，它可能是正常的即使不理想。您有一个动态依赖项列表-

eslint

无法确定其中是否包含所有必需的内容

---

您的解决方案可能会起作用，但它非常脆弱。如果您的

依赖项

发生变化（例如，附加元素或删除的元素）

您已将依赖项作为数组传递，但在接收端，它本质上是指向数组的单个变量。

useffect（）

的Lint规则要求传递方括号中的依赖项，如下文所述

现在是一些技术性的东西。记住是什么产生了警告。是lint在语法上检查代码。它不涉及语义学。从语义上讲，您的依赖项列表是正确的，因为您正在传递数组，但从语法上讲，它不是作为数组传递的，也就是说，它是一个未在方括号中传递的单个变量（如

[dependencies]

）（这是lint正在寻找的）。因此，为了满足lint的要求，您应该写：

useEffect(
  () => { // implementation of function },
  [dependencies]
);

此外，在发送依赖项数组时，还可以使用扩展运算符，如下所示：

useEffect(
  () => { // implementation of function },
  [...dependencies]
);

---

这将通过Babel transpiler将数组元素分散到数组操作符中。Lint也将保持安静。

我的建议是，不管怎样，您静态地将空数组分配给依赖项变量，然后将该变量作为依赖项数组提供，您应该直接提供空数组。另一个是不要破坏你的道具结构，相反你可以直接在useEffect中使用

props.data

，

props.route

。分散依赖关系将导致相同的结果afaict:/，谢谢你的回答，尽管可能会有所不同。这取决于react对依赖关系的研究程度。如果只是查看作为依赖项传递的变量绑定，那么数组扩展似乎是更好的选择。如果react正在执行深度比较，那么只需将依赖项写入方括号内就足够了。lint规则不喜欢扩展依赖项，因此您仍然需要对文件或行禁用lint规则。您将如何解决它？

useEffect(
  () => { // implementation of function },
  [dependencies]
);

useEffect(
  () => { // implementation of function },
  [...dependencies]
);