Axios получает несколько конечных точек JSON и сохраняет в состояние (реагирует)

Question

Я пытаюсь обновить мой запрос на получение axios с 1 конечной точки JSON до 3 конечных точек JSON, а затем сохранить сообщения в состоянии компонента.

https://codesandbox.io/s/multiple-get-requests-gerjq - у меня console.log (posts), но не похоже, чтобы какие-либо объекты были сохранены в состояние.

Любая идея, где я ошибаюсь?

 private getPosts() {
  axios
    .all([
      axios.get("https://cors-anywhere.herokuapp.com/" + "https://...."),
      axios.get("https://cors-anywhere.herokuapp.com/" + "https://...."),
      axios.get("https://cors-anywhere.herokuapp.com/" + "https://www..."),
      axios.get("https://cors-anywhere.herokuapp.com/" + "http://api...."),
      axios.get("https://cors-anywhere.herokuapp.com/" + "https://www..."),
      axios.get("https://cors-anywhere.herokuapp.com/" + "https://www...")
    ])
    .then(axios.spread((response =>
      response.data.map(post => ({
        id: `${ post.Id || post.jobId }`,
        name: `${ post.Name || post.advertisements[0].title.localization[1].value }`,
        company: `${ post.Company || 'Ohly' }`,
        summary: `${ post.Summary }`
      }))
    )))
    .then(posts => {
      this.setState({
        posts,
        isLoading: false
      });
    })
     // Error catching
    .catch(errors => this.setState({ errors, isLoading: false }));
}

Answer 1

Вам нужно получить доступ к трем ответам как к трем аргументам axios.spread и вернуть сопоставленный результат

.then(
    axios.spread((response, response1, response2) => {
      return [...response.data, ...response1.data, ...response2.data].map(
        post => ({
          id: `${post.Id || post.jobId}`,
          name: `${post.Name ||
            post.advertisements[0].title.localization[1].value}`,
          company: `${post.Company || "Ohly"}`,
          summary: `${post.Summary}`,
          url: `${post.AbsoluteUrl || post.adUrl.localization[0].value}`
        })
      );
    })
  )

Рабочая демонстрация

Answer 2

Я бы порекомендовал вместо обычного setState, попробуйте использовать setState с функцией обратного вызова. Просто замените ваш код setState на код ниже:

this.setState({
      posts,
      isLoading: false
    }, () => {
      console.log(this.state)
    });

Вместо console.log вы также можете использовать любую функцию. Но ваше состояние будет обновляться наверняка.

Answer 3

для multi-запроса axios, пожалуйста, следуйте этой схеме

axios.all([
 axios.get('http://google.com'),
 axios.get('http://apple.com')
]).then(axios.spread((googleRes, appleRes) => {
  this.setState({google: googleRes, apple: appleRes});
});

вам нужно сохранить данные API в вашем штате, чтобы получить данные запроса внутри вашего компонента.