如何使用（Promise all）渲染api的响应

Question

我创建示例项目CMS，然后现在获取数据时遇到问题。我使用了JavaScript的 Promise.all ，现在出现错误，问题是如何将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>

并更新您的默认状态，因为该页面将在之前呈现承诺。因此，您的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>
  )
}