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

Question

我有一个带有useEffect钩子的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

所以我试着把组件改成这样，解构道具：

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中全局配置规则，但我在我的项目中找不到该文件。

我是不是漏掉了什么？

Answer 1

不要禁用。这条规则已经过了一次又一次的测试，在战斗中留下了伤痕累累的伤痕，即使不比其他任何ESLint规则更多，也同样受到了探查。

我也认为我知道得更好。但我们都不知道。别让它失效，相信我，它比你我更清楚。我也去过那里。

只要按照规则去做，如果它破坏了你的应用程序，你会很高兴，因为它为你找到了一个免费的bug，你应该修复它，而不是强迫你的应用程序工作。