gpt4 book ai didi

reactjs - 使用异步获取 react 钩子(Hook)

转载 作者:行者123 更新时间:2023-12-03 14:36:02 27 4
gpt4 key购买 nike

我是 React 钩子(Hook)的新手,但我正在尝试使用 useEffectuseCallback ,但得到臭名昭著的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 等中做了类似的事情并且没有得到同样的错误?

最佳答案

钩子(Hook)的 lint 规则假定以“use”开头的东西是钩子(Hook)。因此它认为 useList 是一个钩子(Hook)并试图强制执行 rules of hooks在上面。但它实际上并不是一个钩子(Hook),它只是一个普通的函数,所以你只需要给它一个不同的名字就可以满足 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]);
为什么不是钩子(Hook)?嗯,钩子(Hook)要么是内置钩子(Hook)之一,要么是调用内置钩子(Hook)之一的函数。您的回调不符合这些条件。它是由 useCallback 创建的,但这仅仅意味着它是一个内存函数,而不是一个钩子(Hook)。

关于reactjs - 使用异步获取 react 钩子(Hook),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58244273/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com