我有一个使用 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
中全局配置规则,而且我在我的项目中找不到那个文件。
我是否漏掉了什么?
onChange
函数放入依赖项数组中即可。为什么每个人对这个工具的回应都是告诉他们,使用 React 团队本身使用的工具可能会做错事情,从而立即想要丢弃这个工具呢?我知道不仅仅是你,我们经常在 React 标签中收到这个问题,但它总是让我感到惊讶... - Jared Smith