可以't从子组件访问状态

Can't access state from child component

本文关键字：组件 访问 状态 可以      更新时间：2023-09-26

我正在尝试构建一个天气应用程序。我有一个searchbar组件，它通过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｝，我会得到这个错误：

未捕获的类型错误：无法读取空的属性"city"

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

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

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

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

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

相关文章：