Axios ReactJs Laravel: Как получить Api с несколькими запросами

Question

Я создаю новый проект laravel и объединяю React Javascript Framework. Я смотрю YouTube и читаю какой-то сайт, как использовать API Axios HTTP Requests. однако они не обсуждают, как использовать axios при получении API нескольких запросов.

Вопрос:

Как получить несколько запросов API, а также я хочу, чтобы отобразить его в моей функции визуализации

Я создаю две общедоступные функции (Миссия, Магазин) в моем Домашнем контроллере .

public function mission() {
    $content_mission = DB::table('content_structure')
    ->where('content_pages','=','Home')
    ->where('content_section','=','Mission-Vision')
    ->where('status','=','Active')
    ->orderBy('content_id','Desc')
    ->limit(1)
    ->get();

    return response()->json($content_mission);
}


public function store() {
    $content_store = DB::table('content_structure')
    ->leftJoin('content_upload_assets','content_structure.content_id','=','content_upload_assets.cid')
    ->where('content_pages','=','Home')
    ->where('content_section','=','Store')
    ->where('status','=','Active')
    ->orderBy('content_id','Desc')
    ->limit(1)
    ->get();

    return response()->json($content_store);
}

Я также создаю Index.js в папке моего компонента.

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}, () => {

      });
    })
  }



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

Моя функция рендеринга:

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

Ошибка:

Uncaught TypeError: this.state.missionsApiRes.map не является функцией

Answer 1

Вам нужны пользовательские данные разрешения Axios

Promise.all([
  axios.get('/api/mission'), => axios.get('/api/mission').then(data => data)

Answer 2

С первого взгляда я бы сказал, что ваш this.state.missionsApiRes не определен во время вызова рендера.Попробуйте переместить его в конструктор:

constructor() {
  super();
  this.state = {
    missionsApiRes: []
  }
}