我们在 useEffect 中使用的所有变量都在依赖项数组中吗？

Question

我知道 useEffect 的依赖项是如何工作的。但是，在我的场景中，我不应该看到 prop 值的变化，我将其用作处理流程的条件，但如果我不将其放入依赖项数组中，我将收到 react-hooks/exhaustive-deps 警告。

我的情况是，如果 foo 和 fetchValue 发生变化，我想重新运行整个 fetch。虽然我使用 bar 作为条件来决定调用的是 fechValue，但在我的业务逻辑中，bar 的更改不应该重新运行块。

const Component = ({ foo, bar, fetchValue }) => {
  useEffect = (
    () => {
      if(foo) {
        if (bar) {
          fetchValue();
        }
      }
    },
    [foo, fetchValue] // will get a warning `react-hooks/exhaustive-deps`
  )

  return <div />

}

Answer 1

ESLint 规则用于通过 useEffect 挂钩提供安全性。

如果您绝对确定该值不是 useEffect 的依赖项，则可以添加注释以忽略 ESLint 规则：Disabling Rules with Inline Comments。

我建议添加// eslint-disable-next-line 而不是文件范围的eslint-disable。

这里是more context about this by Dan Abramov：

有什么方法可以专门针对使用扩展运算符的地方禁用此规则？

如果您认为自己知道自己在做什么，可以随时// eslint-disable-next-line react-hooks/exhaustive-deps。

Answer 2

您应该将您使用的所有变量都放在 useEffects 'deps' 数组中的原因是不这样​​做可能会由于数据陈旧而产生奇怪的问题。

---

例如，给定您的用例，假设您的组件 props 最初是 {foo: false, bar: false }（假设 fetchValue 是某个固定函数），然后它们更改为 {foo: true, bar: true}。在这种情况下，您的组件将按预期调用fetchValue。

但作为另一个例子，假设你的道具从{foo: false, bar: false} 更改为{foo: true, bar: false}，然后更改为{foo: true, bar: true}。在这种情况下，fetchValue 没有触发，尽管道具与上一个示例末尾的相同。

也许这本身并没有“错误”，但它肯定很奇怪且不直观：理想情况下，您的组件应该根据其 props 一致地运行，并且 props 更改的顺序无关紧要。

---

所以，是的，您始终可以eslint-ignore deps 数组以使其不完整，但我建议个人寻找另一种解决方案。

如果没有关于用例的更多信息，很难具体说明，但也许可以记住对fetchValue 的调用，这样如果foo 没有改变，它就不会做任何事情？或者 foo 和 bar 可以组合成一个单独的道具，这样它们就可以一起改变？

Answer 3

类似的逻辑经常发生在“useEffect”中的 if 语句中。首先，根本不需要添加依赖项，您可以将其留空。

现在您可以做一些事情，或者简单地忽略警告，因为您的代码看起来不错。或者重构您的代码，其中bar 是fetchValue() 的参数。所以你的代码是：

const Component = ({ foo, bar, fetchValue }) => {
  useEffect = (
    () => {
      if(foo) {
        fetchValue(bar);        
      }
    },
    [foo, fetchValue] 
  )

  return <div />

}

并以if(baz){ //your code} 开始您的fetchValue(baz) 声明。

虽然有点麻烦。

您需要问自己，您期望 foo 或 bar 更改的原因和位置是什么？在组件本身内部？ foo 和/或bar 不应该是状态然后foo 和或bar 作为默认值？

const Component = ({ foo, bar, fetchValue }) => {

  const [fooState, setFooState] = useState(foo);
  const [barState, setBarState] = useState(bar);

  useEffect = (
    () => {
      fooState && barState && fetchValue(); 
    //does the same as your code, I just prefer short circuits for these kind of things.
    },
    [fooState, fetchValue()] 
  )

  return <div />

}