2017-12-30 32 views
0

ここで方向を探しています。ここに私のシナリオがあります:レンダリング前の小道具の更新(Reduxアクションによる非同期呼び出し)

  • ユーザーはすべてのレシピからメタデータをレンダリングするページにあります。
  • ユーザーがレシピをクリックすると、レシピコンポーネントをレンダリングする/ recipes /:idに送信されます。 ComponentDidMount()のRecipeコンポーネントには、非同期のAXIOS呼び出しを自分のサーバーに戻すReduxアクションの呼び出しが含まれています。データは小道具の上に置かれ、スクリーンにレンダリングされます。
  • ユーザーがクリックすると、すべてのレシピページに戻ります。彼らは別のレシピをクリックすると、個々のレシピページに移動します。ここに問題があります:AXIOS/redux要求から非同期呼び出しが終了している間、短いrecipes.name(小道具)が表示されます。

質問は次のとおりです。ユーザーが/ recipes /:idのいずれかに行ったときにデータをレンダリングする前に、非同期還元アクションから新しい小道具を取得して、小道具に関する古いデータが表示されないようにするにはどうすればよいでしょうか。

乾杯!

+0

問題にアプローチするもう1つの方法は、ユーザーがレシピページから離れてナビゲートしたときに失効したデータを消去することです。 –

+0

コンポーネントの小道具がRedux状態にリンクされている場合、レシピを取得するためにredux thunkを呼び出すだけです。 Axiosを使用して状態を更新し、コンポーネントを自動的に再レン​​ダリングする必要があります。 – urubuz

+0

ここにはたくさんのオプションがあります。 1つの方法は、レシピとインデックスページ間の遷移時に 'Recipe'コンポーネントをアンマウントし、' recipes /:id'が受信されるたびにそれを再マウントすることです。 もう1つ、おそらく単純なオプションは、コンポーネントをレンダリングする前にフェッチが完了するまで待つだけです(レンダリング前に同期呼び出しを行う) – lfender6445

答えて

0

ライフサイクルフックを使用して、ここで冗長なレシピデータを消去するアクションを呼び出すことができます。

+0

ちょっとリチャード。応答していただきありがとうございます。したがって、現在の状態をクリアするアクションをディスパッチするには、componentwillUnmountを使用しますか? – Miscue

+0

はい、または代わりに、すべてのレシピコンポーネントで 'componentDidMount'を使用してすべてのレシピルートに戻るときに現在のレシピをクリアすることができます – Richard

関連する問題