javascript - 无法从子组件访问状态

Question

我正在尝试构建一个天气应用程序。我有一个搜索栏组件，它通过 api 获取数据并设置最初为 null 的天气 Prop 的状态:

  getInitialState: function() {
    return {text: '', weather: null};
  },
  handleClick: function() {
    WeatherApi.get('q=' + this.state.text).then(function(data) {
      this.setState({weather: data})
    }.bind(this));
  },

我想要做的是将天气 Prop 的状态通过用户设置后传递给子组件:

<TodaysWeatherContainer weatherData={this.state.weather} />

然后从组件中访问它，如下所示:

var TodaysWeatherContainer = React.createClass({
  render: function() {
    return (
      <div>
        <p>{this.props.weatherData}</p>
      </div>
    );
  }
});

现在，当我搜索城市时，出现以下错误:

未捕获( promise 中)错误:对象作为 React 子对象无效(发现:带有键 {city、cod、message、cnt、list} 的对象)。如果您打算渲染子集合，请使用数组或使用 React 附加组件中的 createFragment(object) 包装对象。检查 TodaysWeatherContainer 的 render 方法。

如果我添加 {this.props.weatherData.city} 我会收到此错误:

未捕获的类型错误:无法读取 null 的属性“城市”

这就是我感到困惑的地方。当使用 this.props.weatherData 返回对象时，它怎么可能为 null？

Answer 1

听起来 AJAX 请求返回的数据不仅仅是文本(这将是 <p></p> 标记之间的有效子节点)，而是一个对象，它是无效子节点。

设置 weather将状态属性更改为 API 响应返回的对象的属性，而不是整个对象。

针对您的最新评论，听起来像 weatherData.city本身就是一个需要解析的对象。你也许可以通过更好地研究 API 来自己解决这个问题，而我们对此一无所知。

正如 @deowk 在评论中指出的那样，您的第二个错误是由父组件的初始状态引起的:{weather: null} 。当子组件首次呈现时，它尝试查找 city属性(property)null目的。您不再收到该错误，因为您现在是在 API 回调中执行查找，而不是在子组件本身中执行查找。