我正在尝试构建一个天气应用程序。我有一个搜索栏组件,它通过 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?
最佳答案
听起来 AJAX 请求返回的数据不仅仅是文本(这将是 <p></p>
标记之间的有效子节点),而是一个对象,它是无效子节点。
设置 weather
将状态属性更改为 API 响应返回的对象的属性,而不是整个对象。
针对您的最新评论,听起来像 weatherData.city
本身就是一个需要解析的对象。你也许可以通过更好地研究 API 来自己解决这个问题,而我们对此一无所知。
正如 @deowk 在评论中指出的那样,您的第二个错误是由父组件的初始状态引起的:{weather: null}
。当子组件首次呈现时,它尝试查找 city
属性(property)null
目的。您不再收到该错误,因为您现在是在 API 回调中执行查找,而不是在子组件本身中执行查找。
关于javascript - 无法从子组件访问状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38469990/