问题描述
我有一个带有 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 中全局配置规则，但我在我的项目中找不到该文件。
这里有我遗漏的东西吗？
解决方法
不要禁用。该规则已经过测试和重新测试，并且与任何其他 ESLint 规则相比，都受到了战争的创伤和探索。
我也是，以为我知道得更好。但我们都没有。不要禁用它，相信我，它比你我更了解。我也去过。
只要按照规则进行操作，如果它破坏了您的应用程序，请高兴，因为它免费为您找到了一个错误，您应该修复它，而不是强迫您的应用程序运行。