我试图将async/await函数中的API响应存储到响应全局变量中,该变量稍后将由App()访问,但我被提示代码下方显示的错误。
async function getAllTutors() {
try{
const response = await axios.get('API...');
console.log("getAllTutors(): " + JSON.stringify(response.data.body));
return response;
}catch(error) {
return [];
}
}
var response = null;
(async () => {
console.log("Retrieving Tutors");
response = await getAllTutors();
console.log("response (caller) = " + JSON.stringify(response.data.body))
})();
function App() {
...
console.log("HERE: " + JSON.stringify(response.data.body));
const [ data, setTutors ] = useState(employees);
...
error screenshot
我尝试在两个函数中记录值,它似乎确实输出了所需的JSON对象,但App()仍然显示未定义的响应变量。我甚至试图将App()更改为async/await,但我被引入其他错误。
2条答案
按热度按时间n3schb8v1#
所以
response
初始值为null。你正在调用一些异步的函数,这些函数正在执行一些抓取操作。在某个时间点,这些函数将完成数据的抓取,并将
response
更新为该API的任何返回值。但是JS不想等待任何不需要的东西,除非你特别告诉它。所以当你深入到function App()
时,即使该代码在其上面的所有逻辑之后出现,它也会在响应返回并更新'global'变量response
之前立即执行。本质上,由于JS的异步特性,在
response
被设置为API的响应之前,您正在调用response.data.body
。这会出错,因为response
为null。你正在实现的模式是错误和奇怪的。响应可以存储在状态中,API调用可以在useEffect中执行,例如:
或者类似于该结构的东西,可能会根据API返回的内容更改一些内容。
jqjz2hbq2#
最简单的方法是存储一个promise,然后你可以在任何地方重用这个promise。
React中这种方法的问题在于它不是 * React式的 *;数据更改时不会触发任何重新渲染。
我建议使用上下文来 Package 任何需要数据的组件(或 Package 整个应用程序)。
举个例子
然后可以在提供程序中 Package 任何组件,例如
在这些组成部分中
这将确保在初始化上下文时只检索一次数据。然后可以与任何您想要的组件共享数据。