Question

现在仅显示第一项的信息。我存储了我想从中不断获取信息的城市，现在我我试图从每个要显示的信息。我不确定该怎么做。

class HomePage extends Component {
  state = {
    weatherResults: []
  };

  componentDidMount() {
    const cities = ["Boston", "New York"];

    fetch(`http://api.openweathermap.org/data/2.5/forecast?id=52490&units=imperial&appid=${API_KEY}&q=${cities}&cnt=60`)
      .then(res => res.json())
      .then(results => {
        this.setState({
          weatherResults: results
        });
        console.log(results);
      })
      .catch(error => console.error(error));
  }

  render() {
    const { weatherResults } = this.state;
    return (
      <div>
        {this.state.weatherResults.length !== 0 && (
          <div className="container" key={weatherResults.city.id}>
            <h2> {weatherResults.city.name} </h2>
            <p> {weatherResults.list[0].main.temp}</p>
            <p>{weatherResults.list[0].weather[0].description}</p>
            <p>
              Humidity:
              {weatherResults.list[0].main.humidity}
            </p>
            <p> Wind: {weatherResults.list[0].wind.speed} </p>
          </div>
        )}
      </div>
    );
  }
}

export default HomePage;

Answer 1

您可以为每个城市创建一个单独的fetch请求，并在两个请求完成后使用Promise.all将两个请求的结果都置于状态。

然后可以在weatherResults数组上使用map，以在render方法中显示有关两个城市的信息。

示例

class HomePage extends Component {
  state = {
    weatherResults: []
  };

  componentDidMount() {
    const cities = ["Boston", "New York"];

    const promises = cities.map(city => {
      return fetch(`http://api.openweathermap.org/data/2.5/forecast?id=52490&units=imperial&appid=${API_KEY}&q=${city}&cnt=60`)
        .then(res => res.json());
    });

    Promise.all(promises)
      .then(weatherResults => {
        this.setState({ weatherResults });
      })
      .catch(error => console.error(error));
  }

  render() {
    const { weatherResults } = this.state;

    if (weatherResults.length === 0) {
      return null;
    }

    return (
      <div className="container">
        {weatherResults.map(weatherResult => (
          <div key={weatherResult.city.id}>
            <h2>{weatherResult.city.name}</h2>
            <p>{weatherResult.list[0].main.temp}</p>
            <p>{weatherResult.list[0].weather[0].description}</p>
            <p>Humidity: {weatherResult.list[0].main.humidity}</p>
            <p>Wind: {weatherResult.list[0].wind.speed}</p>
          </div>
        ))}
      </div>
    );
  }
}

Answer 2

您可以这样做。

render() {
  const { weatherResults } = this.state;
     return (
         <div>
             { this.state.weatherResults.length &&
             <div className = "container">
               <h2> { weatherResults.city.name}  </h2>
             </div>
             }
         { 
          this.state.weatherResults.list.map((ele, idx) => (
              <div>
               <p> {ele.main.temp}</p>
               <p> 
                 {ele.weather[0].description} 
              </p>
              <p> Humidity: 
                 {ele.main.humidity} </p>
             <p> Wind: {ele.wind.speed} </p>
         </div>
          ))
        }
      </div>
     );
   }
  }

基本上，我在上面的工作是创建一个反应组件数组，并根据列表中的内容显示它们。现在我不是100％知道您的JSON结构是什么样子，所以我只是根据您上面发布的代码进行了假设。

如果可能的话，将所有与JSON相关的内容移到map函数中。

此部分：

{ this.state.weatherResults.length &&
         <div className = "container">
           <h2> { weatherResults.city.name}  </h2>
         </div>
         }

此外，建议数组/映射调用中的每个元素都有其自己的唯一键，该键不是索引。因此，如果JSON包含某些唯一标识符，例如数据库中的主键，则使用它。

Answer 3

要在React中从Array渲染项目，应该使用Array.prototype.map()。

例如：

  render() {
    const { weatherResults } = this.state;
    return (
      <div>
        {
          weatherResults.list.length > 0 && 
          weatherResults.list.map(item => (
            <div className="container" key={weatherResults.city.id}>
              <h2> {item.city.name} </h2>
              <p> {item.main.temp}</p>
              <p>{item.weather[0].description}</p>
              <p>Humidity: {item.main.humidity}</p>
              <p> Wind: {item.wind.speed} </p>
            </div>
         ));
       }
      </div>
    );
  }

有没有一种方法可以使用api绘制我的城市阵列中的城市并渲染阵列中所有城市的信息？

3 个答案: