хранить каждый ответ API в массиве в React

Question

Я использую API metaweather.com для создания веб-приложения.Я хочу показать 6 городов на главной странице;Я полагаю, мне нужно вызвать API 6 раз и поместить данные в массив, например allCitiesDetails.Как мне это сделать?Если есть лучший способ, пожалуйста, скажите мне.Вот мой код:

state = {
    city: {
      cityname: this.props.value
    },
    woeid: '',
    todayWeather: [],
    weatherDetails: [],
    allCitiesDetails: []
  };
  getCity = (cityName) => {
    var self = this;
    axios
      .get('https://www.metaweather.com/api/location/search/?query=' + cityName)
      .then(response => {
        self.setState({
          woeid: response.data[0].woeid
        });
        self.getWeather(response.data[0].woeid);
      })
      .catch(function(error) {
        alert('No results were found. Try changing the keyword!');
      });
  }

  getWeather = async (woeid) => {
    const { data: weatherDetails } = await axios.get(
      'https://www.metaweather.com/api/location/' + woeid
    );
    this.setState({
      weatherDetails,
      todayWeather: weatherDetails.consolidated_weather[0]
    });
  }

Answer 1

вместо использования состояния внутри вызова API ...

self.setState({
      woeid: response.data[0].woeid
    });

вы можете помещать значения в фиктивный массив, после чего вне вызова API вы можете установить состояние.

Answer 2

Вы должны сделать 6 разных обещаний и использовать Promise.all , чтобы узнать погоду во всех 6 городах параллельно.Вы можете сделать это следующим образом:

const getWeatherFromWoeid = cityName => axios.get(`https://www.metaweather.com/api/location/${woeid}`);

....

const p1 = getWeatherFromWoeid(woeid1);
const p2 = getWeatherFromWoeid(woeid2);
const p3 = getWeatherFromWoeid(woeid3);
const p4 = getWeatherFromWoeid(woeid4);
const p5 = getWeatherFromWoeid(woeid5);
const p6 = getWeatherFromWoeid(woeid6);

Promise.all([p1,p2,p3,p4,p5,p6])
    .then(([result1, result2, result3, result4, result5, result6]) => {
         ...set result in the state   
    })
    .catch((err) => {
       ...handle error
    })

Кроме того, всегда используйте catch, если вы используете обещания или async