从天气 api 和 setState inoto 对象数组中获取天气反应本机

Question

这是我的状态。我想从state 中的所有对象中获取lat 和long 并获取它们当前的天气，然后将它们的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 循环中使用 fetch 请求从来都不是一个好主意，因为如果元素数量增加了，就会有大量的 fetch 请求到服务器，这最终会使进程变慢。如果你想这样做，试试下面描述的代码：

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});
      })
   }