render（）が明示的なsetState（）呼び出しによって呼び出されたか、または親コンポーネントがそれに小道具を渡したかどうかを調べる方法は？

Question

私は、容器内に2つの兄弟構成要素RegionsDropdownComponentとCitiesDropdownComponentを持っています。UpdateProfileFormComponent

オンスタートでは、UpdateProfileFormComponentは（サーバーから事前に取得された）プロファイルデータを保持しています。プロファイルの領域は小道具としてRegionDropdownComponentに渡され、地域と都市は両方ともCitiesDropdownComponentに渡されます。

CitiesDropdownComponentの範囲内で、地域は都市ドロップダウンをフィルタリングするために使用され、ドロップダウンは地域に属する都市のみを反映し、都市は都市入力フィールドを設定するために使用されます。 CitiesDropdownComponentのrender()の方法では、そのprops.regionとprops.cityが使用されます。ユーザーがRegionsDropdownComponentから別のオプションを選択したとき

多くはである何、そして親UpdateProfileFormComponentでhandleChange()はUpdateProfileFormComponentは、その都市がドロップダウンしても、設定し直すどのフィルタ、CitiesDropdownComponentに選択した領域と空の文字列の小道具を通過するようにthis.setState()を呼ぶだろう都市入力を空にする。

これまでのところとても良いです。

今では代理店のドロップダウンをフィルタリングし、代理店の入力フィールドをリセット/設定するRegionsDropdownComponentに依存するでから独立しているがCitiesDropdownComponentに似ている第三兄弟AgenciesDropdownComponentもあります。 は、ユーザーが都市ドロップダウンから別のオプションを選択したとき、私はthis.setState({city:selected_option_value})を呼ぶだろうCitiesDropdownComponentでhandleChange()方法をご希望の、CitiesDropdownComponentに戻って...しかし、その後CitiesDropdownComponentのrender()はすでにpropsの代わりthis.stateを使用しています。

これら2つの相反する要件を調整する方法を教えてください。

Answer 1

小道具の更新によってコンポーネントがレンダリングされるとき、最初にcomponentWillReceiveProps()が呼び出されます。これを使用してレンダリングの原因を識別することができます。

だからあなたの場合には、あなたが次のことを試すことができます。（少なくともcity用） を

• CitiesDropdownComponentは常にrender()状態を使用する必要があり、あなたは単にcomponentWillReceivePropsで小道具の状態を更新することができます