Question

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

const something = useSomething()

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

如果您现在在something内使用此useEffect(() => ...)值，并且没有将something作为对useEffect第二个参数数组的依赖关系，则短毛绒会警告您：

React Hook useEffect缺少依赖项：“某物”。包括它或删除依赖项数组。（反应钩/详尽的下降）

当然，ESLint无法知道something始终保持不变（每个组件），但是每次使用something的依赖项数组时都将useEffect这样不变的东西添加到react-hooks/exhaustive-deps的依赖项数组中真烦人。仅仅停用// eslint-disable-next-line react-hooks/exhaustive-deps似乎也不是一个好的解决方案（也不使用useEffect）。

有没有比向class Foo{ bar(value){ return value } } let newFoo = new Foo() console.log(newFoo.bar(123)) // should work fine as function is invoked console.log(newFoo.bar) // here i need to throw or display an error instead of returning value的依赖项数组中添加不必要的东西更好的解决方案了，以使Linter开心了？

请在此处找到一个简单的演示： https://codesandbox.io/s/sad-kowalevski-yfxcn [编辑：请注意，问题出在上面描述的一般模式，而不是这个愚蠢的小演示-此演示的目的只是为了显示ESLint警告，其他都没有]

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

Answer 1

这里

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

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

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

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

Answer 2

该示例有些人为设计，但我怀疑您可能希望创建一个没有此依赖性的新useEffect块。

如果商店没有变化，但我会问您为什么希望控制台记录它的时间。如果只想记录更改，则将someStore添加到依赖项数组中。这实际上取决于您要实现的目标以及关注点的分离。

我认为如果将someStore用作这种效果处理的任何逻辑的一部分，则它确实属于您的依赖项数组。

您也可以将const something = useSomething()移动到效果中，并将其提取为自定义钩子link

useEffect(() => {
    console.log("Current state (may change)", someState);

  }, [someState]); 

useEffect(() => {
    console.log("Current store (will never change)", someStore);
  });

React，ESLint：eslint-plugin-react-hooks显示错误的“缺少依赖项”

2 个答案: