以下
How to use async/await with axios in react
我尝试在React.js应用程序中使用Async/Await向我的服务器发出一个简单的get请求。服务器在/data
上加载一个简单的JSON,如下所示
JSON
{
id: 1,
name: "Aditya"
}
我可以使用简单的jQuery Ajax get方法将数据获取到我的React App。但是,我想利用axios库和Async/Await来遵循ES 7标准。我现在的代码看起来像这样:
class App extends React.Component{
async getData(){
const res = await axios('/data');
console.log(res.json());
}
render(){
return(
<div>
{this.getData()}
</div>
);
}
}
使用这种方法,我得到以下错误:
对象作为React子对象无效(找到:[object Promise])。如果你想呈现一个子元素的集合,请使用数组。
我没有正确地执行它吗?
4条答案
按热度按时间q43xntqr1#
5w9g7ksd2#
两个问题跳出来:
1.您的
getData
从不返回任何内容,因此如果undefined
不拒绝,它的promise(async
函数总是返回promise)将由undefined
实现1.错误消息清楚地表明,您试图直接呈现promise
getData
返回的值,而不是等待它稳定下来,然后呈现fulfillment值地址#1:
getData
应该 * 返回 * 调用json
的结果:地址#2:我们必须看到更多的代码,但从根本上说,
……因为这不需要等待决议。你需要使用
getData
来设置状态:.并在渲染时使用该状态:
更新:现在你已经向我们展示了你的代码,你需要做 * 这样的事情 *:
**进一步更新:**您已经表示在
componentDidMount
中使用await
而不是then
和catch
。您可以通过在其中嵌套一个async
IIFE函数并确保该函数不会抛出。(componentDidMount
本身不能是async
,没有什么会消耗这个promise。)pwuypxnk3#
根据我过去几个月的经验,我意识到实现这一目标的最佳方法是:
如果你试图对click这样的事件发出post请求,那么就在事件上调用
getData()
函数,并像这样替换它的内容:此外,如果您在组件即将加载时发出任何请求,只需将
async getData()
替换为async componentDidMount()
并更改render函数,如下所示:jq6vz3qz4#