Как сделать ответ API с помощью (Обещать все)

Question

Я создаю пример проекта CMS, затем у меня возникла проблема с получением данных. Я использовал Promise.all javascript, теперь я получил ошибку, вопрос в том, как сделать setState в JSX. Спасибо.

Uncaught 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

Вам необходимо сделать следующее:

Обновите ваш 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>
  )
}

Answer 2

Вы должны использовать this для доступа к функциям того же компонента.

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