Question

为了在API上呈现数据，我难以映射到该对象。

有人知道我可能做错了什么吗？

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

  componentDidMount() {
    let obj;
    fetch(`http://api.openweathermap.org/data/2.5/forecast? 
     id=52490&appid=${API_KEY}&q=new%20york&cnt=2`)
      .then(res => res.json())
      .then(results => (obj = results))
      .then(() => console.log(obj));
    this.setState({
      weatherResults: this.state.weatherResults
    });
  }

  render() {
    return (
      <div>
        {this.state.weatherResults &&
          this.state.weatherResults.map(data => (
            <div className="container">
              <p>{data.city.name}</p>
            </div>
          ))}
      </div>
    );
  }
}

export default HomePage;

Answer 1

由于thredded.some_path请求是异步的，因此您希望在请求完成后将响应置于组件状态时使用fetch。

Looking at one of the sample requests of the API似乎您获得了一个对象作为响应，其中包含setState。您可以将city.name最初设置为weatherResults，然后在对象加载后访问null。而不是将city.name作为数组。

示例

class HomePage extends Component {
  state = {
    weatherResults: null
  };

  componentDidMount() {
    fetch(`http://api.openweathermap.org/data/2.5/forecast?id=52490&appid=${API_KEY}&q=new%20york&cnt=2`)
      .then(res => res.json())
      .then(results => {
        this.setState({
          weatherResults: results
        });
      })
      .catch(error => console.error(error));
  }

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

    if (weatherResults === null) {
      return null;
    }

    return (
      <div>
        <div className="container">
          <p>{weatherResults.city.name}</p>
        </div>
      </div>
    );
  }
}

映射数组和渲染结果

1 个答案: