Question

我正在学习React.js并尝试使用fetch（）获取API，并且尝试使用componentDidMount（），但是我遇到了问题，您可以在帖子末尾看到图片。

import React, { Component } from 'react'


export default class App extends Component {
    
    state = {
      weather: []
    };
    
    
    fetchData() {
        fetch('prevision-meteo.ch/services/json/rochelle-17')
        .then((response) => response.json())
        .then((obj) => {
            console.log('javascript object: ', obj)
            this.setState({ weather: obj.results});
        })
        .catch((error) => {
            console.error(error)
          })
    }
    componentDidMount() {
        console.log('Le composant App est monté sur le DOM !')
        this.fetchData();
    }
    render() {
        return (
            <div>
                {this.state.weather&& this.state.weather.map((weatherRecord) => ( 
                  <div key={weatherRecord.city_info.name}>{weatherRecord.city_info.name}</div>
                 ))}
                Hello World !
                <button /*onClick={() => this.fetchData()}*/> Click me</button>
            </div>
        )
    }
}

我想在页面中获得city_info的名称，但是没有用！

这是控制台中的结果，有人可以帮助我吗？

Answer 1

设置状态是异步的，因此React会在设置状态之前进行渲染。您可以做的是使短路条件this.state.weather &&处于短路状态，以检查天气数组是否存在，并且只有在可用时才执行map操作，并且不会出现任何错误。

import React, { Component } from 'react'


export default class App extends Component {
    
    state = {
      weather: []
    };
    
    
    fetchData() {
        fetch('http://localhost:3000/rochelle-17.json')
        .then((response) => response.json())
        .then((obj) => {
            //console.log('javascript object: ', obj)
            this.setState({ weather: obj.results});
        })
    }
    componentDidMount() {
        console.log('Le composant App est monté sur le DOM !')
        this.fetchData();
    }
    render() {
        return (
            <div>
                {this.state.weather&& this.state.weather.map((weatherRecord) => (
                    <div key={weatherRecord.city_info.name}></div>
                ))}
                Hello World !
                <button /*onClick={() => this.fetchData()}*/> Click me</button>
            </div>
        )
    }
}

一些注意事项：

React的较新版本支持设置初始状态，如下所示：
```
 state = {
   weather: []
 }
```
在API调用失败的情况下捕获错误也是一种很好的做法。您可以在最后一个.catch之后像这样简单地使用.then()：
```
 .catch((error) => {
   console.error(error)
 })
```
自ES6开始，您无需为要渲染的return使用<div>。您只需使用带有尖括号()而不是大括号{}的地图即可隐式返回
```
 {this.state.weather&& this.state.weather.map((weatherRecord) => ( 
   <div key={weatherRecord.city_info.name}></div>
 ))}
```

Answer 2

尝试一下

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      wheather: null
    };
  }

  fetchData() {
    fetch("http://localhost:3000/rochelle-17.json")
      .then((response) => {
        return response.json();
      })
      .then((obj) => {
        //console.log('javascript object: ', obj)
        this.setState({ wheather: obj });
      });
  }
  componentDidMount() {
    console.log("Le composant App est monté sur le DOM !");
    this.fetchData();
  }
 render() {
    return (
      <div>
        {this.state.wheather
          && <div key={this.state.wheather.city_info.name}>{this.state.wheather.city_info.name}</div>
        }
        Hello World !
        <button /*onClick={() => this.fetchData()}*/> Click me !</button>
      </div>
    )
  }
}

使用componentDidMount（）反应js获取API

2 个答案: