穷举-deps规则不将自定义挂钩的结果识别为反应引用 [英] exhaustive-deps rule doesn't recognise result of custom hook as React reference

问题描述

想象一个钩子：

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屋！