![](/img/trans.png)
[英]React Hook useEffect has a missing dependency with useEffect
[英]React | React Hook useEffect has a missing dependency
我只想在第一次打开页面时使用 react hook 更新商店中的值。 为此,我将 useEffect '[]' 的第二个参数设为空列表。 没有什么能阻止它工作,但我从 ESLint 规则中收到警告: React Hook useEffect 缺少依赖项:'changeCount'。 要么包含它,要么删除依赖数组 react-hooks/exhaustive-deps 。 如何删除此警告?
const App = ({UserStore:{setCount, count}}) => {
const changeCount = () => {
setCount();
}
useEffect(() => {
changeCount();
},[])
return (
..
)}
使用此语法在您的依赖项数组之前删除此eslint
警告,如下所示:
const App = ({UserStore:{setCount, count}}) => {
const changeCount = () => {
setCount();
}
useEffect(() => {
changeCount();
// eslint-disable-next-line
},[])
return (
..
)}
changeCount
是一个 function 不是setState
或钩子。 因为你在useEffect
中使用它,所以 React 会警告你。 因为它警告你阅读这篇文章的原因
上面的一些答案建议你禁用检查,我建议只禁用你正在处理的那个。 但是,通常您无需担心警告。
在useEffect
移动changeCount
const App = ({UserStore:{setCount, count}}) => {
useEffect(() => {
const changeCount = () => {
setCount();
}
changeCount();
},[])
return (
..
)
}
创建一个自定义钩子...
export const useMountEffect = handler => useEffect(handler, []);
像这样消费
useMountEffect(() => {
changeCount();
});
不仅你会摆脱这个警告......而且更清楚的是,这个效果只会在onMount
上执行......
修复 eslint 配置“react-hooks/exhaustive-deps”
这是钩子的 eslint 错误,那么修复 eslint 配置怎么样
{
"plugins": [
// ...
"react-hooks"
],
"rules": {
// ...
"react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
"react-hooks/exhaustive-deps": "off" // Checks effect dependencies
}
}
但它会使你的钩子成为错误的动作,所以你可以使用另一种方式/* eslint-disable */
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.