[英]eslint-plugin-react-hooks is giving unexpected errors (react-hooks/exhaustive-deps)
I have an issue where my vscode eslint is giving me wrong warnings.我有一个问题,我的 vscode eslint 给了我错误的警告。 I have a simple function in react component which I am trying to optimize with useCallBack hook.我在反应组件中有一个简单的 function ,我正在尝试使用 useCallBack 挂钩进行优化。
Here is the simple function where I am getting two props and there are being used in params object I create and as per the documentation, I am putting those two props as dependencies of useCallBack.这是简单的 function ,其中我得到了两个道具,并且在我创建的参数 object 中使用,根据文档,我将这两个道具作为 useCallBack 的依赖项。
const Test = ({ ReportAddressNumber, ClientNumber }) => {
const [test, setTest] = useState({ count: 0 });
const fetchSampleIDs = useCallback(() => {
setTest(true);
const URL = `/Samples`;
const params = {
ReportAddressNumber,
ClientNumber,
};
fetch(URL, params)
}, [ClientNumber, ReportAddressNumber]);
useEffect(() => {
fetchSampleIDs();
}, [fetchSampleIDs]);
return <h1>{test.count}</h1>;
};
Now the issue is in vscode it's telling me that those two props are unnecessary as dependencies in useCallback.现在问题出在 vscode 中,它告诉我这两个道具作为 useCallback 中的依赖项是不必要的。
React Hook useCallback has unnecessary dependencies: 'ClientNumber' and 'ReportAddressNumber'. Either exclude them or remove the dependency array.eslint(react-hooks/exhaustive-deps)
I am able to reproduce this with my .eslintrc
and package.json
file.我可以用我的.eslintrc
和package.json
文件重现这一点。 I have created this codesandbox to play with this and in order to see the actual issue, you need to export the codesanbox as zip and run npm install
and look at it in vscode.我创建了这个代码框来解决这个问题,为了查看实际问题,您需要将代码框导出为 zip 并运行npm install
并在 vscode 中查看它。
https://codesandbox.io/s/kind-mahavira-fvsub https://codesandbox.io/s/kind-mahavira-fvsub
I am appreciating your knowledge and contribution here, Thank you.我在这里感谢您的知识和贡献,谢谢。
After spending 4 hours finally I got the answer.花了4个小时后,我终于得到了答案。
There is a conflicting dependency.存在冲突的依赖关系。 I am using eslint-config-airbnb: 16.1.0
which does not include any react-hooks linting configurations.我正在使用eslint-config-airbnb: 16.1.0
,它不包括任何 react-hooks linting 配置。 However, I had installed the eslint-plugin-react-hooks
on my own which was conflicting with eslint-config-aribnb
versions.但是,我自己安装了与eslint-config-aribnb
版本冲突的eslint-plugin-react-hooks
。
upgrading eslint-config-airbnb
as per instruction fixes my issue.按照说明升级eslint-config-airbnb
可以解决我的问题。 In case if anyone have same issue.如果有人有同样的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.