如何配置eslint规则以全局忽略react-hooks/exhaustive-deps？

Question

我有一个使用 useEffect hook 的 React 组件，代码如下：

const LocationEditor: React.FC<SectionEditorProps> = (props) => {
const [section, setSection] = useState({...(props.section as Location)});
useEffect(() => {
    props.onChange(section);
}, [section]);

当我运行这个项目时，我收到了这个警告：

React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useEffect call and refer to those specific props inside useEffect  react-hooks/exhaustive-deps

于是我尝试将组件更改为按以下方式注入props：

const LocationEditor: React.FC<SectionEditorProps> = ({section, onClickCancel, onClickSave, onChange}) => {
    const [tmpSection, setSection] = useState({...(section as Location)});
    useEffect(() => {
        onChange(tmpSection);      
    }, [tmpSection]);

如果我在依赖项数组之前添加此注释，就可以消除警告：

// eslint-disable-next-line react-hooks/exhaustive-deps

但是，当我将下面的代码块添加到package.json中的eslintConfig时，它似乎没有任何作用：

{
  "plugins": [
    "react-hooks"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "off"
  }
}

我看到一些人谈论使用 .eslinrc 文件，但是我认为你也可以在 package.json 中全局配置规则，而且我在我的项目中找不到那个文件。

我是否漏掉了什么？

- master_chef

---

那几乎肯定是个不好的想法。只需将 onChange 函数放入依赖项数组中即可。为什么每个人对这个工具的回应都是告诉他们，使用 React 团队本身使用的工具可能会做错事情，从而立即想要丢弃这个工具呢？我知道不仅仅是你，我们经常在 React 标签中收到这个问题，但它总是让我感到惊讶... - Jared Smith

谢谢！那真的很有帮助。基本上我是按照这个链接修复的: https://dev59.com/TlMH5IYBdhLWcg3woQrQ - master_chef

承认禁用此规则是一个坏主意，但对于那些固执己见的人来说，有一个答案仍然是很好的。链接的答案没有解决 package.json 配置似乎被忽略的问题。 - Mike Willis

这个答案对我帮助很大（忽略警告）：https://dev59.com/Pb3pa4cB1Zd3GeqPcFRL - Roberto Fernandes

https://beta.reactjs.org/learn/removing-effect-dependencies#why-is-suppressing-the-dependency-linter-so-dangerous - Andreas Riedmüller

Answer 1

通常情况下，你不会想要禁用这个规则。然而，在一些特殊情况下，禁用它是值得的。

例如，如果你在挂载时进行了一次获取操作，并且确定它不需要再次执行，你可以使用下面的代码来禁用它。

// eslint-disable-next-line react-hooks/exhaustive-deps

首先，确认规则是错误的。它经过了实战测试，大部分时间都是正确的。通过忽略依赖关系，您可能会引入微妙的错误。

您也可以全局禁用该规则，尽管这并不推荐。

- Obed Parlapiano

---

感谢您的帮助，已根据上面的评论进行了修复。 - master_chef

“只需遵循规则”并不总是最佳选择。例如：如果您需要从服务器获取数据，通常会将一个空数组作为第二个参数传递给 useEffect（因为您仅需要在组件挂载时运行回调函数），这是来自 React 文档的官方建议。然后，“exhaustive-deps” 经常会用警告来打扰您，告诉您“忘记”了某些依赖项（但您确定没有）。添加您不需要的依赖项是一种反模式，因为它可能导致不必要的重新渲染甚至是无限循环的重新渲染...... - Roman Karagodin

我认为这只是部分正确。实际上，useState的官方文档指出，从依赖数组中省略setter是安全的。 https://reactjs.org/docs/hooks-reference.html#usestate 也许希望linter能够识别未包含在依赖数组中的setter或useReducer-dispatch函数有些过高要求？ - aweibell