如何配置 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

但是，当我将下面的块添加到它时eslintConfig，package.json它似乎没有做任何事情：

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

我看到有些人在谈论使用该.eslinrc文件，但我认为您也可以在其中全局配置规则，但我package.json在我的项目中找不到该文件。

有什么我在这里想念的吗？

Answer 1

不要禁用。该规则已经过测试和重新测试，并且与任何其他 ESLint 规则相比，即使不是更多，也是战斗伤痕累累和被探索的。

我也是，以为我知道得更好。但我们都没有。不要禁用它，相信我，它比你我更了解。我也去过那里。

只需按照规则进行操作，如果它破坏了您的应用程序，请高兴，因为它免费为您找到了一个错误，您应该修复它，而不是强迫您的应用程序运行。