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} />

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

未捕获（在承诺中）错误：对象无效作为React子对象（找到：具有键{city，cod，message，cnt，list}的对象）。如果您要渲染子集合，请使用数组，或使用React附加组件中的createFragment（object）包装对象。检查var TodaysWeatherContainer = React.createClass({ render: function() { return ( <div> <p>{this.props.weatherData}</p> </div> ); } });的呈现方法。

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

未捕获的TypeError：无法读取属性＆＃39; city＆＃39;为null

这是我感到困惑的地方。使用this.props.weatherData返回对象时，它如何为null？

Answer 1

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

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

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

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

无法从子组件访问状态

1 个答案: