如何確定render（）是由顯式setState（）調用還是由父組件傳遞道具來調用？

我有兩個兄弟組件RegionsDropdownComponent和CitiesDropdownComponent在一個容器內UpdateProfileFormComponent。如何確定render（）是由顯式setState（）調用還是由父組件傳遞道具來調用？

在開始時，UpdateProfileFormComponent擁有配置文件數據（已從服務器預取）;配置文件的區域作爲道具傳遞到RegionDropdownComponent，而區域和城市都傳遞到CitiesDropdownComponent。

在CitiesDropdownComponent範圍內，區域用於過濾城市下拉列表，使下拉列表僅反映屬於地區的城市，城市則用於設置城市輸入字段。在CitiesDropdownComponent的render()方法中，使用其props.region和props.city。

更重要的是，當用戶從RegionsDropdownComponent不同的選項，然後在父UpdateProfileFormComponent一個handleChange()會叫this.setState()使UpdateProfileFormComponent會通過選擇區域和空字符串道具CitiesDropdownComponent，然後再過濾的城市下拉列表中，還可以設置城市輸入爲空。

到目前爲止這麼好。

現在還有一個第三兄弟AgenciesDropdownComponent，它獨立於但類似於CitiesDropdownComponent，因爲它取決於RegionsDropdownComponent過濾機構下拉列表並設置/重置機構輸入字段。回到CitiesDropdownComponent，當用戶選擇從城市下拉菜單不同的選項，我想在一個CitiesDropdownComponent方法handleChange()將調用this.setState({city:selected_option_value}) ...但隨後的CitiesDropdownComponentrender()已經使用props而不是this.state。

我該如何嘗試協調這兩個相沖突的要求？

來源

2017-03-18 Lim Tan

'render（）'不應該知道這一點。 –

如果調用componentWillRecieveProps（），則由於父項傳遞道具而發生渲染。 setState不會調用此生命週期方法 –

當組件由於道具更新而呈現時，首先調用componentWillReceiveProps()。您可以嘗試使用此來區分導致渲染的原因。

所以你的情況，你可以嘗試以下方法：

CitiesDropdownComponent應始終render()使用狀態，並且可以簡單地從道具componentWillReceiveProps更新狀態（至少爲city）

來源

2017-03-18 06:42:30 mguijarr

嘿，mguijarr，tks！我能夠使用您的反饋意見來解決我的問題......這節省了我的一天！ –

嘿，mguijarr，tks！我能夠使用您的反饋解決我的問題......這節省了我的一天！我通過在CitiesDropdownComponent的componentWillReceiveProps（）{}中粘貼「this.state.city = this.props.city」，並在CitiesDropdownComponent的render（）方法中使用「this.state.city」，從而跟蹤了我們的建議。我想關閉這個問題，並獎勵給你...但我似乎無法找到[Like]或[Up]按鈕或類似的東西，這樣我就可以給你獎勵點數.... –

如何確定render（）是由顯式setState（）調用還是由父組件傳遞道具來調用？

回答

相關問題