无法从子组件中访问状态

我在尝试构建天气应用程序。我有一个通过API获取数据，并设置了天气支撑其最初是空的状态的搜索栏组件：无法从子组件中访问状态

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我得到这个错误：

遗漏的类型错误：无法读取空

的特性“城市”这就是我越来越糊涂了。当使用this.props.weatherData返回一个对象时，它怎么会为null？

来源

2016-07-19 Banner

它应该如何呈现对象文字？ “对象不适合作为React的孩子” –

可能发生的事情是您没有获取数据。也许天气通话不起作用。你可以在承诺中记录数据吗？因为你天气到'空'，这显示为类型对象。我认为state.weather从不更新。 – JordanHendrix

在我的handleclick函数中添加了console.log后面的this.setState行，并返回：Object {city：Object，cod：“200”，message：0.008，cnt：40，list：Array [40]} – Banner

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

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

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

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

来源

2016-07-19 23:20:28

他在做什么：'如果我加{this.props.weatherData.city}我得到这个错误：未捕获TypeError：无法读取属性'城市'null' – JordanHendrix

我设置了'this.setState（{weather ：data.city.name}）'现在它正在工作！ – Banner

谢谢你这个vidor – Banner

无法从子组件中访问状态

回答

相关问题