получить погоду из API погоды и установить массив объектов inoto в react native

Question

Это мое состояние. Я хочу получить lat и long от всех объектов в state и получить их текущую погоду, а затем установить их temperature в состояние температуры. Кто-нибудь может мне помочь с этим?

class App extends React.Component{
        this.state = {
              data: [
                {
                  id: 1,
                  lat: "35.6892" ,
                  long: "51.3890",
                  temperature: '',
                },
                {
                  id: 2,
                  lat: "45.6892" ,
                  long: "35.3890",
                  temperature: '',
                },
                {
                  id: 3,
                  lat: "59.6892" ,
                  long: "-72.3890",
                  temperature: '',
                },
                {
                  id: 4,
                  lat: "23.6892" ,
                  long: "-52.3890",
                  temperature: '',
                },
        
            componentDidMount() {
                
                for(var i =0 ; i<= this.state.data.length - 1 ; i++) {
            
                   let url = 'https://api.openweathermap.org/data/2.5/weather?lat=' + this.state.data[i].lat + '&lon=' + this.state.data[i].long + '&units=metric&appid=api key';
                
                  fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        this.setState.data((prevState, props) => ({
                            temperature: data.main.temp
                    }));
                    })
                }
              }
    }

Answer 1

Хотя использование запроса выборки внутри for l oop никогда не является хорошей идеей, так как при увеличении количества элементов будет много запросов выборки на сервер, что в конечном итоге замедлит процесс. Тем не менее, если вы хотите сделать это, попробуйте код, описанный ниже:

for(var i =0 ; i<= this.state.data.length - 1 ; i++) {
        
    let url = 'https://api.openweathermap.org/data/2.5/weather?lat=' + this.state.data[i].lat + '&lon=' + this.state.data[i].long + '&units=metric&appid=api key';
            
    fetch(url)
    .then(response => response.json())
     .then(data => {
          // 1. Make a shallow copy of the items
          let items = [...this.state.data];

          // 2. Make a shallow copy of the item you want to mutate
          let item = {...items[1]};

          // 3. Replace the property you're intested in
          item.temperature = data.main.temp;

          // 4. Put it back into our array. N.B. we *are* mutating the array here, but that's why we made a copy first
          items[1] = item;

           // 5. Set the state to our new copy
           this.setState({items});
      })
   }