如何使用（Promise all）呈现api的响应

Question

我创建示例项目CMS然后现在我有问题获取数据。我使用了Promise.all的javascript，现在我得到了错误，问题是如何将setState渲染到JSX中。谢谢。

未捕获的ReferenceError：未定义renderMission

这是代码：

constructor() {
    super();
    this.state = {

    }

}

componentWillMount() {

    Promise.all([
        axios.get('/api/mission'),
        axios.get('/api/store')
    ]).then(response => {


        const [storesApiRes, missionsApiRes] = response;
        this.setState({storesApiRes,missionsApiRes}, () => {
            console.log(missionsApiRes);
        });

    })
}

renderMission() {
   return this.state.missionsApiRes.map(mission => 
        <div>{mission.content}</div>
    )
}

在我的JSX中

<div className="container">
     {renderMission()}
 </div>

我的控制台记录

Answer 1

你必须使用this来访问相同组件的功能。

<div className="container">
 {this.renderMission()}
</div>

Answer 2

您需要执行以下操作：

更新您的JSX以包含this

<div className="container">
  {this.renderMission()}
</div>

并更新您的默认状态，因为页面将在promises解决之前呈现。所以你的javascript文件应如下所示：

constructor() {
  super();
  this.state = {

  }

}

componentWillMount() {

  this.setState({
    missionsApiRes: []
  });

  Promise.all([
    axios.get('/api/mission'),
    axios.get('/api/store')
  ]).then(response => {
    const [storesApiRes, missionsApiRes] = response;
    this.setState({storesApiRes,missionsApiRes}, () => {
        console.log(missionsApiRes);
    });
  })
}

renderMission() {
  return this.state.missionsApiRes.map(mission => 
    <div>{mission.content}</div>
  )
}