Установить данные API в состояние

Question

Я извлекаю данные из API и отфильтровываю только те данные, которые мне нужны.Я пытаюсь установить восстановленные объекты в состояние.Только последний объект установлен в состояние, хотя

axios.get('http://api.openweathermap.org/data/2.5/forecast?zip=90210&APPID=MY_KEY&units=imperial')
      .then(res => {
        var data = res.data;
        var city = res.data.city.name;

        for (var i = 0; i < data.list.length; i += 8) {
          const filteredData = {
            city,
            date: data.list[i].dt_txt,
            expectedTemp: data.list[i].main.temp,
            minTemp: data.list[i].main.temp_min,
            maxTemp: data.list[i].main.temp_max,
            description: data.list[i].weather[0].main,
            icon: data.list[i].weather[0].icon,
            id: data.list[i].weather[0].id
          };

          this.setState({ data: filteredData });
        }
        console.log(this.state.data);
      })
      .catch(err => console.log(err));

Answer 1

Причина, по которой установлена ​​только последняя, ​​заключается в том, что в каждом цикле вы переопределяете setState. Что вам нужно сделать, это сохранить его в массиве, а затем setState с этим массивом.

axios.get('http://api.openweathermap.org/data/2.5/forecast?zip=90210&APPID=badca0372074fc97fb1ceb2c2359eff5&units=imperial')
      .then(res => {
        var data = res.data;
        var city = res.data.city.name;

        let filteredDataArray = [] // data array

        for (var i = 0; i < data.list.length; i += 8) {
          const filteredData = {
            city,
            date: data.list[i].dt_txt,
            expectedTemp: data.list[i].main.temp,
            minTemp: data.list[i].main.temp_min,
            maxTemp: data.list[i].main.temp_max,
            description: data.list[i].weather[0].main,
            icon: data.list[i].weather[0].icon,
            id: data.list[i].weather[0].id
          };
          filteredDataArray.push(filteredData)  // add to the array        
        }
        this.setState({ data: filteredDataArray }); // setState with the data array
        console.log(this.state.data);
      })
      .catch(err => console.log(err));