json 文件推送状态

Question

我创建了带有反应的基本天气应用程序，我想将所有 json 文件推送状态，但我不能这样做。

import React, {Component} from 'react';
import './App.css';
import CityList from './CityList';
// this is an array that just has id, city_name and country property
import {cityName} from './Resorces';

class App extends Component {
  constructor (){
    super()
    this.state = {
      cities:{},
    }
  }

  render() {
    const {cities} = this.state;
    console.log('cities state', cities);

    return (
      <div className='tc'>
        <h1 className='f1  pa3 ma2'> World Weather</h1><hr/>
        <CityList cities={cities}/>
      </div>
    );
  }
 componentDidMount(){
  const citySource = cityName.map((city) => {
    return fetch(https://api.weatherbit.io/v2.0/current?city=${city.name}&country=${city.country}&key=86e622607fbe4c2cb9f7f71889a4d48d)
      }).then(response => response.json())
       .then( data => {this.setState({cities : data})});
    console.log('citySource', citySource);
  }
}
export default App;

上面的这段代码没有访问 Resorces.js 中的 cityName 数组，也没有执行 map() 循环，因此没有将 json 文件推送到 STATE 中的对象的城市

我该怎么做？

下面是cityName数组

export const cityName = [
  {
    id: 1,
    name: "New York City",
    country: "US",
  },
  {
    id: 2,
    name: "Vienna",
    country: "AT",
  },
  {
    id: 3,
    name: "Istanbul",
    country: "TR",
  },
  {
    id: 4,
    name: "London",
    country: "GB",
  },
  {
    id: 5,
    name: "Ankara",
    country: "TR",
  },
  {
    id: 6,
    name: "Paris",
    country: "FR",
  },
  {
    id: 7,
    name: "Madrid",
    country: "ES",
  },
  {
    id: 8,
    name: "Amsterdam",
    country: "NL",
  },
  {
    id: 9,
    name: "Belgrade",
    country: "RS",
  },
  {
    id: 10,
    name: "Munich",
    country: "DE",
  },
  {
    id: 11,
    name: "Berlin",
    country: "DE",
  },
  {
    id: 12,
    name: "Chicago",
    country: "US",
  },
  {
    id: 13,
    name: "Brussels",
    country: "BE",
  },
  {
    id: 14,
    name: "Rome",
    country: "IT",
  },
  {
    id: 15,
    name: "Washington",
    country: "US",
  }
];

Answer 1

问题是你有一个数组，你需要用数组中的值调用一个api。

所以你需要使用Promise.all 包装它，检查下面的代码

编码愉快 :)

const cityName = [
  {
    id: 1,
    name: "New York City",
    country: "US",
  },
  {
    id: 2,
    name: "Vienna",
    country: "AT",
  },
  {
    id: 3,
    name: "Istanbul",
    country: "TR",
  },
  {
    id: 4,
    name: "London",
    country: "GB",
  },
  {
    id: 5,
    name: "Ankara",
    country: "TR",
  },
  {
    id: 6,
    name: "Paris",
    country: "FR",
  },
  {
    id: 7,
    name: "Madrid",
    country: "ES",
  },
  {
    id: 8,
    name: "Amsterdam",
    country: "NL",
  },
  {
    id: 9,
    name: "Belgrade",
    country: "RS",
  },
  {
    id: 10,
    name: "Munich",
    country: "DE",
  },
  {
    id: 11,
    name: "Berlin",
    country: "DE",
  },
  {
    id: 12,
    name: "Chicago",
    country: "US",
  },
  {
    id: 13,
    name: "Brussels",
    country: "BE",
  },
  {
    id: 14,
    name: "Rome",
    country: "IT",
  },
  {
    id: 15,
    name: "Washington",
    country: "US",
  }
];

let cities = []

Promise.all(cityName.map(city => 
  fetch(`https://api.weatherbit.io/v2.0/current?city=${city.name}&country=${city.country}&key=86e622607fbe4c2cb9f7f71889a4d48d`)))
 .then(resp => Promise.all(resp.map(r => r.json())))
 .then(entireData => {
    cities = entireData
    console.log(cities)
}) // in react you need to do this.setState({cities: entireData})
 
 

Answer 2

您遇到的具体错误是什么？

Answer 3

您是否首先收到回复？如果您收到回复，请执行此操作。

const citySource = cityName.map((city) => {
    return fetch(https://api.weatherbit.io/v2.0/current?city=${city.name}&country=${city.country}&key=86e622607fbe4c2cb9f7f71889a4d48d)
      }).then(response => {
response.json()
this.setState({cities : response })
})
    console.log('citySource', citySource);
  }

Answer 4

在状态下用数组替换 citites 对象并替换此代码。

  componentDidMount() {
    const citySource = cityName.map((city) => {
        return fetch("https://api.weatherbit.io/v2.0/current?city=${city.name}&country=${city.country}&key=86e622607fbe4c2cb9f7f71889a4d48d")
        .then(response => response.json())
        .then(data => { 
            this.setState(prevState => {
                cities : [...prevState.cities , data]
            });
         });
        });
}