レンダリング前の小道具の更新（Reduxアクションによる非同期呼び出し）

Question

ここで方向を探しています。ここに私のシナリオがあります：

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

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

乾杯！

Answer 1

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