React hooks exhaustive-deps 规则也需要 useEffect 数组中的函数

Posted 2023-03-17

【中文标题】React hooks exhaustive-deps 规则也需要 useEffect 数组中的函数

【英文标题】：React hooks exhaustive-deps rule also requires functions in useEffect array

【发布时间】：2019-09-29 11:30:04

【问题描述】：

所以我有以下效果

  useEffect(() => 
    if (disabled) 
      setAnimatedValue(0);
     else 
      setAnimatedValue(1);
    
  , [disabled]);

如果disabled 属性发生变化，这只是将按钮设置为启用或禁用状态。

我还在我的 eslint 配置中添加了以下规则

  'react-hooks/exhaustive-deps': 'warn',

现在我收到一个警告，需要将setAnimatedValue 与disabled 属性一起添加到我的useEffect 数组中，但这只是一个既不是状态也不是道具的函数，所以它不应该真的据我了解，进去吧。

有没有办法让这条规则只在我缺少state 或prop 值时发出警告？

【问题讨论】：

我想除了无视规则外，你无能为力。在 repo 中打开一个问题。

这对我来说是规则中最烦人的事情——大多数时候它很有帮助。但不应包含函数。

【参考方案1】：

如果您的 setAnimation 函数不依赖于外部状态或道具，那么省略是安全的。

即。如果 setAnimation 唯一需要执行其效果的是传递给它的 0/1 值 - 那么它可以安全地省略。

它可能是一个 setter 函数，所以你很安全。

https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies