访问react render方法中的对象属性

Question

我写了一个小的反应组件，从开放的天气api中获取一些数据。获取成功，我可以在响应中获得一个json对象。

然后我使用self.myDelegate

将此响应保存到组件状态

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

然而，当我来渲染任何数据时，我总是会收到一条错误，指出`无法读取属性'预测'为空。

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

this.setState({})

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

Answer 1

看起来你忘记了几件事，为了Component到setState，你需要将它绑定到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>
    )
  }
}