在React.js中将Async / Await与Axios一起使用

Question

以下

如何在React中与axios一起使用async /
await

我试图在React.js应用程序中使用Async / Await向我的服务器发出一个简单的get请求。服务器加载一个简单的JSON
/data，看起来像这样

JSON格式

{
   id: 1,
   name: "Aditya"
}

我可以使用简单的jquery ajax get方法将数据获取到我的React App。但是，我想利用axios库和Async /
Await来遵循ES7标准。我当前的代码如下所示：

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]）。如果要渲染子级集合，请改用数组。

我执行不正确吗？

Answer 1

跳出两个问题：

1. 您getData从不返回任何东西，因此其诺言（async函数始终会返回诺言）在解决undefined时将与之同时解决

2. 错误消息清楚地表明您正在尝试直接呈现承诺getData回报，而不是等待其解决然后呈现解决方案

寻址＃1：getData应 返回 调用结果json：

async getData(){
   const res = await axios('/data');
   return await res.json();
}

Addressig＃2：我们必须看更多的代码，但是从根本上讲，您不能

<SomeElement>{getData()}</SomeElement>

…因为这不等待解决方案。您需要使用getData来设置状态：

this.getData().then(data => this.setState({data}))
              .catch(err => { /*...handle the error...*/});

…并在渲染时使用该状态：

<SomeElement>{this.state.data}</SomeElement>

更新 ：现在你已经告诉我们你的代码，你需要做的 是这样 的：

class App extends React.Component{
    async getData() {
        const res = await axios('/data');
        return await res.json(); // (Or whatever)
    }
    constructor(...args) {
        super(...args);
        this.state = {data: null};
    }
    componentDidMount() {
        if (!this.state.data) {
            this.getData().then(data => this.setState({data}))
                          .catch(err => { /*...handle the error...*/});
        }
    }
    render() {
        return (
            <div>
                {this.state.data ? <em>Loading...</em> : this.state.data}
            </div>
        );
    }
}

进一步更新： 您已指示首选使用awaitin
componentDidMount而不是then和catch。您可以通过在其中嵌套asyncIIFE函数并确保该函数不会抛出来实现。（componentDidMount本身不能async，没有东西会消耗那个诺言。）例如：

class App extends React.Component{
    async getData() {
        const res = await axios('/data');
        return await res.json(); // (Or whatever)
    }
    constructor(...args) {
        super(...args);
        this.state = {data: null};
    }
    componentDidMount() {
        if (!this.state.data) {
            (async () => {
                try {
                    this.setState({data: await this.getData()});
                } catch (e) {
                    //...handle the error...
                }
            })();
        }
    }
    render() {
        return (
            <div>
                {this.state.data ? <em>Loading...</em> : this.state.data}
            </div>
        );
    }
}