使用异步获取反应钩子

Question

我是 React 钩子的新手，但我正在尝试使用带有useCallback的useEffect，但得到了臭名昭著的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等中做类似的事情并且没有得到相同的错误？

Answer 1

钩子的 lint 规则假定以"use"开头的东西是钩子。因此，它认为useList是一个钩子，并试图在其上强制执行钩子的规则。但它实际上不是一个钩子，它只是一个普通的功能，所以你只需要给它一个不同的名称，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创建的，但这只是意味着它是一个记忆函数，而不是一个钩子。