穷举-deps规则不将自定义挂钩的结果识别为反应引用 [英] exhaustive-deps rule doesn't recognise result of custom hook as React reference
本文介绍了穷举-deps规则不将自定义挂钩的结果识别为反应引用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
想象一个钩子:
export function useMounted() {
const mounted = React.useRef<boolean>(false);
React.useEffect(() => {
mounted.current = true;
return () => {
mounted.current = false;
};
}, []);
return mounted;
}
我想使用该挂钩来确定组件是否仍在挂载。它的一个用例是,只有在浏览器获取并缓存图像时,才会异步加载和显示图像。此类用例的简化版本可以是:
function useLazyImage(src: string, triggerCallback: any) {
const mounted = useMounted();
const image = useRef<HTMLImageElement>();
useEffect(() => {
if (!!src) {
image.current = new Image();
image.current.onload = () => {
if (mounted.current)
triggerCallback();
};
image.current.src = src;
return () => {
image.current = undefined;
};
}
return undefined;
}, [src]);
}
它不包括错误处理,也不处理TriggerCallback的更改,但它显示了我的问题。反应挂钩/穷举-deps警告我缺少mounted
依赖关系,尽管它不应该是AFAIK的。因为mounted
是Ref,所以通过使用它,我不会意外地关闭过时的作用域,并且eslint实际上知道这一点。如果我将代码更改为
function useLazyImage(src: string, triggerCallback: any) {
const mounted = React.useRef<boolean>(false);
React.useEffect(() => {
mounted.current = true;
return () => {
mounted.current = false;
};
}, []);
const image = useRef<HTMLImageElement>();
埃斯林特不再警告我了。这是ESLint的局限性,它无法知道我的自定义挂钩的结果是什么,还是我做得不正确,存在隐藏的错误?
推荐答案
在第一个示例中,您将从创建引用的useMounted
函数返回引用。因此,引用正在被泄露,因此可能会被更改。在最下面的示例中,引用被创建为函数局部值,因此不是组件状态的一部分。这就是为什么您在下面的示例中看不到警告。
这篇关于穷举-deps规则不将自定义挂钩的结果识别为反应引用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文