使用异步获取反应挂钩

问题描述

我是反应挂钩的新手，但我尝试将useEffect与useCallback一起使用，但得到了错误的React Hook "useList" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks。

此文件包含makeRequest：

function useConnections = () => {
    const makeRequest = React.useCallback(async (props) => {
        // Determine base url, determine headers here
        const response = fetch(url, options);

        return response;
    }

    return { makeRequest };
}

此文件是我的useListProvider：

function useListProvider = () => {
    const { makeRequest } = useConnections();

    const useList = React.useCallback(async (props) => {
        // makerequest is just a wrapper for fetch with a bunch of needed headers.
        const response = await makeRequest(props);

        return { body: response.body };
    }

    return { useList };
}

这是呈现的页面：

function MainPage() {
    const [isBusy, setIsBusy] = React.useStore(false);
    const { useList } = useListProvider();

    React.useEffect(() => {
        if (!isBusy) { useList(); setIsBusy(false); } // ERROR HERE!
    }, [useList]);

    return (
        <React.Fragment>
            IsBusy: {isBusy}
        </React.Fragment>
    );
}

可能我没有得到它，但是我只想在状态说它不忙的时候获取useList数据。但是，这样做，我会得到上面列出的错误。我知道我不能将其视为组件类，但是您将如何从回调处理单个和多个呈现呢？

我不完全确定这里发生了什么，因为我在useConnections等中执行了类似的操作，但没有收到相同的错误？

推荐答案

钩子的行距规则假定以"；use"；开头的内容是钩子。因此，它认为useList是一个钩子，并试图在其上强制执行rules of hooks。但它实际上不是一个钩子，它只是一个普通函数，所以您只需要给它一个不同的名称，就会满足线头规则。

function useListProvider = () => {
    const { makeRequest } = useConnections();

    const callback = React.useCallback(async (props) => {
        const response = await makeRequest(props);

        return { body: response.body };
    }, [makeRequest])

    return { callback };
}

// elsewhere:

const { callback } = useListProvider();

React.useEffect(() => {
    if (!isBusy) {
      callback();
      setIsBusy(false);
    }
}, [callback]);

为什么它不是钩子？钩子可以是一个内置钩子，也可以是调用其中一个内置钩子的函数。您的回拨不符合这些标准。它是由useCallback创建的，但这仅仅意味着它是一个有记忆的函数，而不是一个挂钩。

这篇关于使用异步获取反应挂钩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！