無法從子組件中訪問狀態

我在嘗試構建天氣應用程序。我有一個通過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

無法從子組件中訪問狀態

回答

相關問題