無法從子組件訪問狀態

Question

我正在嘗試構建一個天氣應用程序。 我有一個searchbar組件，該組件通過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));
  },

我想做的是，一旦通過用戶設置了天氣道具的狀態，就將其傳遞給子componenet：

<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}，則會出現此錯誤：

未捕獲的TypeError：無法讀取null的屬性“ city”

這就是我感到困惑的地方。 使用this.props.weatherData返回對象時，如何將其設置為null？

Answer 1

聽起來AJAX請求返回的數據不僅是文本（在那些<p></p>標記之間的有效子節點），還是對象，它是無效的子節點。

將狀態的weather屬性設置為API響應返回的對象（而不是整個對象）的屬性。

回應您的最新評論，聽起來是weatherData.city本身是一個需要解析的對象。 您可能可以通過更好地研究我們自己不了解的API來解決此問題。

正如@deowk在評論中指出的那樣，您的第二個錯誤是由父組件的初始狀態引起的： {weather: null} 。 首次渲染子組件時，它試圖在該null對象上找到city屬性。 您不再收到該錯誤，因為您現在正在API回調中而不是在子組件本身中執行查找。