使用异步获取反应钩子答案

【问题标题】：React hooks with async fetch使用异步获取反应钩子
【发布时间】：2020-02-03 06:10:00
【问题描述】：

我是 React 钩子的新手，但我尝试将 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 数据。但是，这样做，我得到上面列出的错误。我知道我不能以与 Component 类相同的方式来考虑这一点，但是您将如何从回调中处理单个和多个渲染？

我不完全确定这里发生了什么，因为我在 useConnections 等中做了类似的事情并且没有得到同样的错误？

【问题讨论】：

搞笑的问题！

标签： reactjs react-hooks

【解决方案1】：

钩子的 lint 规则假定以“use”开头的东西是钩子。因此它认为 useList 是一个钩子并试图在其上强制执行rules of hooks。但它实际上不是一个钩子，它只是一个普通的函数，所以你只需要给它一个不同的名字，它就会满足 lint 规则。

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创建的，但这只是意味着它是一个记忆函数，而不是一个钩子。

【讨论】：