json - 在react render方法中访问对象属性

Question

我编写了一个小型 React 组件，它从开放天气 API 中获取一些数据。获取成功，我可以在响应中获取 json 对象。

然后，我使用 this.setState({}) 将此响应保存到组件状态

react 开发工具显示预测对象实际上保存在状态中。

但是，当我渲染任何数据时，我总是收到一条错误消息，指出“无法读取 null 的属性“预测””。

下面是 react 组件和对象本身的屏幕截图。

    export default class Weather extends Component {
    getWeather () {
        var self = this;

        fetch('http://api.openweathermap.org/data/2.5/weather?zip=sl44jn,uk&units=metric&APPID=ed066f80b6580c11d8d0b2fb71691a2c')  
            .then (function (response) {  
                if (response.status !== 200) {  
                    console.log('Looks like there was a problem. Status Code: ' + response.status);  
                    return;  
                }

                response.json().then(function(data) {  
                    self.setWeather(data);
                });
            })

            .catch (function (err) {  
                console.log('Fetch Error :-S', err);  
            });
    }

    setWeather (forecast) {
        console.log(forecast);
        this.setState({
          forecast: forecast.name
        })
    }

    componentWillMount () {
        this.getWeather();
    }

    componentDidMount () {
        // window.setInterval(function () {
    //          this.getWeather();
    //  }.bind(this), 1000);
    }

  render() {
    return (
        <h1>{this.state.forecast}</h1>
    )
  }
}

这是数据对象本身，现在我只是尝试访问名称属性。

Answer 1

看起来您忘记了几件事，为了将Component设置为setState，您需要最好在构造函数中将其绑定(bind)到this 。您还需要设置初始状态(在您的情况下是一个空对象)，并且您可以将整个响应保存在对象中并仅访问您想要的部分。看看:

export default class Weather extends Component {

constructor() {
    super();
    this.state = {
      forecast: {}
    };
    this.setWeather = this.setWeather.bind(this);
  }

  getWeather () {
    let self = this;
    fetch('http://api.openweathermap.org/data/2.5/weather?zip=sl44jn,uk&units=metric&APPID=ed066f80b6580c11d8d0b2fb71691a2c')
      .then (function (response) {
        if (response.status !== 200) {
          console.log('Looks like there was a problem. Status Code: ' + response.status);
          return;
        }
        response.json().then(function(data) {  
        self.setWeather(data);
      });
    })
    .catch (function (err) {  
      console.log('Fetch Error :-S', err);
    });
  }

  setWeather (forecast) {
    this.setState({
      forecast: forecast
    });
  }

  componentWillMount() {
    this.getWeather();
  }

  render() {
    const { forecast } = this.state;
    return (
      <h1>{forecast.name}</h1>
    )
  }
}