javascript 在自定义挂接中使用继续请求取消提取

cyvaqqii 于 2023-01-08 发布在 Java

关注(0)|答案(1)|浏览(125)

我创建了一个自定义钩子来获取数据，在这个钩子中我有一个异步函数，看起来像这样：

const useData = () => {
    const [enabled, setEnabled] = useState(true);
    const [data, setData] = useState(false);
    const fetchData = async () => {
        const response = await fetch();
        const data = await response.json();

        while (data.continue && enabled) {
            response = await fetch(data.requestId);
            data = await response.json();
        }
    };

    useEffect(() => {
        console.log(enabled);
    }, [enabled]);

    return { data, setEnabled };
};

当我从一个组件调用setEnabled（false）时，当useEffect记录它时，它被设置为false，但它在fetchData函数中继续为true，它永远不会取消我所期望的获取。

JavaScript

来源：https://stackoverflow.com/questions/75024108/cancel-fetch-with-continue-request-in-a-custom-hook

1条答案

按热度按时间

xdnvmnnf1#

这是因为fetchData回调函数在第一次被调用时“捕获”了data变量的状态，并且在您更改data时它不知道它的新值（这在React中称为过时闭包）。要解决此问题，您必须使用useRef钩子：

const useData = () => {
    const [enabled, setEnabled] = useState(true);
    const [data, setData] = useState(false);
    const isCancelled = useRef(false);
    const fetchData = async () => {
        const response = await fetch();
        const data = await response.json();

        while (data.continue && !isCancelled.current) {
            response = await fetch(data.requestId);
            data = await response.json();
        }
    };

    useEffect(() => {
        isCancelled.current = !enabled;
    }, [enabled]);

    return { data, setEnabled };
};

赞(0）回复(0）举报 2023-01-08

我来回答

javascript 在自定义挂接中使用继续请求取消提取

1条答案

相关问题

热门标签

最新问答