反应，ESLint:eslint-plugin-react-hooks显示错误的“缺少依赖项" [英] React, ESLint: eslint-plugin-react-hooks shows incorrect "missing dependency"

问题描述

假设您正在使用React，并且正在编写一个自定义钩子 useSomething ，该钩子每次为同一组件调用时都会返回相同的事物.

Assume you are using React and you are writing a custom hook useSomething that returns the identical same thing each time it is invoked for the same component.

const something = useSomething()

// useSomething() at time X  === useSomething() at time Y

如果您现在在 useEffect(()=> ...)内使用此 something 值，并且您未传递 something 作为对 useEffect 的第二个参数的数组的依赖项，则linter会警告您:

If you now use this something value inside of a useEffect(() => ...) and you do not pass something as a dependency to the array of the second argument of useEffect then the linter will warn you:

React Hook useEffect缺少依赖项:某物".包括它或删除依赖项数组.(反响/详尽的下降)

React Hook useEffect has a missing dependency: 'something'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps)

当然，ESLint无法知道 something 始终保持相同(每个组件)，而是将 something 之类不变的东西添加到 useEffect的依赖项数组中每次使用它们确实很烦人.只是停用 react-hooks/exhaustive-deps 似乎也不是一个好的解决方案(也不使用//eslint-disable-next-line react-hooks/exhaustive-deps >).

Of course ESLint cannot know that something will always stay identical (per component), but adding not-changing things like something to the dependency array of useEffect each time they are used is really annoying. Just deactivating react-hooks/exhaustive-deps does also not seem to be a good solution (nor using // eslint-disable-next-line react-hooks/exhaustive-deps).

有没有比将不必要的东西添加到 useEffect 的依赖项数组中更好的解决方案，只是为了使Linter开心呢?

Is there a better solution than to add things like that unnecessarily to the dependency array of useEffect just to make the Linter happy?

请在此处找到一个简单的演示: https://codesandbox.io/s/sad-kowalevski-yfxcn

Please find a simple demo here: https://codesandbox.io/s/sad-kowalevski-yfxcn

请在此处找到其他演示: https://codesandbox.io/s/vibrant-tree-0cyn1

Please find an additional demo here: https://codesandbox.io/s/vibrant-tree-0cyn1

推荐答案

此处

https://github.com/facebook/react/issues/14920#issuecomment-471070149

例如，您可以阅读以下内容:

for example you can read this:

如果它确实是常量，那么在deps中指定它就不会受到影响.例如，自定义挂钩中的setState函数返回到组件，然后从效果中调用它的情况.皮棉规则不够聪明，无法理解这样的间接性.但另一方面，任何人都可以稍后再返回之前包装该回调，并可能引用其中的另一个prop或状态.这样就不会恒定了！而且，如果您无法处理这些更改，则会遇到讨厌的prop/state错误.因此，指定它为更好的默认值.

If it truly is constant then specifying it in deps doesn't hurt. Such as the case where a setState function inside a custom Hook gets returned to your component, and then you call it from an effect. The lint rule isn't smart enough to understand indirection like this. But on the other hand, anyone can wrap that callback later before returning, and possibly reference another prop or state inside it. Then it won’t be constant! And if you fail to handle those changes, you’ll have nasty stale prop/state bugs. So specifying it is a better default.

因此，也许只需将永不更改的值添加到 useEffect 的依赖项数组中，可能仍是最佳解决方案.尽管如此，我还是希望有一种类似ESLint react-hooks的配置可能性来定义一个钩子名称列表，其返回值应视为静态值.

So maybe just adding that never-changing values to the dependency array of useEffect may yet be the best solution. Nevertheless I hoped there would be something like a ESLint react-hooks configuration possibility to define a list of hook names which whose return values should be considered as static.

这篇关于反应，ESLint:eslint-plugin-react-hooks显示错误的“缺少依赖项"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！