子レスキューコンポーネントの状態をリセットする方法

Question

APIからデータを読み込むreact.jsアプリには、一連の質問（textboxes、radiolist、checkboxesなど）が表示されています。ユーザーはそれらを入力し、すべての回答をAPIに提出し、APIは新しい質問を送信します。

これらの質問はすべて単一のオブジェクトになっていますので、私はstateの現在の質問セットを保持するparent react.jsコンポーネントを作成しました。状態が変わると、以下の各質問が再現されます。これはかなりうまく動作します。

問題は、正確に同じ質問を連続して2回表示することがありますが、これはstateおよびreact.jsに保持されているため完全に新しいコンポーネントをレンダリングする必要がないことを知るのに十分です古いものがいくつかの小さな更新を加えて行うためです。

問題は、最初にcomponentDidMountで設定された子コンポーネントの状態に格納されている初期データに基づいてラジオボタンを選択した場合です。しかし、第二の質問が来るとき、それは本質的に同じ構成要素なので、状態が残る。コンストラクタは再度呼び出されません。

私は多分、他のイベントのいずれかを使用する必要があると思う：

• componentWillReceiveProps
• componentWillMount
• componentWillUpdate

が、私はどちら把握することはできません最も一貫性のあるもの。

基本的には、親がAPIから新しいデータを受け取り、本質的にすべての子コンポーネントを再レンダリングする（ただし、反応しないようにする）たびにselectedAnswerをリセットします。

編集は

私はそれを再作成または再するかどうかを決めることができますので、私は、コンポーネントの中に小道具の異なるセットを渡すことができるかどうか、内部のライフサイクルイベントを経て、これをリセットしようとするのではなく、疑問に思います通常の方法でレンダリングします。

Answer 1

これを最適に行うには、質問のセットを返すapiを仮定します。それには、idが関連付けられている可能性があります。この

<Child key={`${data_id}_${index}`} /> 

以下のようなものをレンダリングすると、同じセットのために、彼らは何度も何度も取り付け保管しないと、新しいデータセットが取得された場合にのみ、マウントされていることを確認する一方、そのIDを使用すると、すべての子コンポーネントのためのユニークキーを作成しますその場合はdata_idが変更され、各子コンポーネントの再マウントが発生します

Answer 2

Reduxをチェックアウトすることをおすすめします。これにより、状態の管理がより簡単になります。私はここにいくつかのコードを提供するだろうが、私は実際に質問を理解するか分からない。私たちをあなたのGithubにリンクさせたら、私はおそらくこの特定の質問に答えることができました。

また、あなたは本当に状態に触れる必要はないようです。それは、イベントを付け加え、そのような状態を制御するより多くの人生を思い出します。たとえば、onSubmitを使用すると、APIコール（およびその他のもの）を作成し、その後にフォーム状態をリセットする別の機能を持たせることができます。かなりストレートになるでしょう。特に、Promisesを使用している場合は特にそうです。