无法从子组件访问状态

Question

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

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

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

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

然后像这样从组件中访问它：

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

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

未捕获（在承诺中）错误：对象作为 React 子项无效（找到：带有键 {city、cod、message、cnt、list} 的对象）。如果您打算渲染一组子项，请改用数组或使用 React 附加组件中的 createFragment(object) 包装对象。检查TodaysWeatherContainer的渲染方法。

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

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

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

Answer 1

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

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

在回应您的最新评论时，听起来weatherData.city 本身就是一个需要解析的对象。您可能可以通过更好地研究我们不了解的 API 来自己解决这个问题。

正如@deowk 在 cmets 中指出的那样，您的第二个错误是由父组件的初始状态引起的：{weather: null}。当子组件第一次被渲染时，它试图在null 对象上找到city 属性。您不再收到该错误，因为您现在是在 API 回调中而不是在子组件本身中执行查找。