React レンダー関数で async/await を使用する方法

React では、レンダー関数は通常、純粋な同期操作を目的としています。ただし、特定のシナリオでは、この関数内で非同期タスクを実行する必要が生じる場合があります。この記事では、render 関数で async/await 構文を効果的に使用する方法について説明します。

問題を理解する

質問で強調されているように、async/ を使用しようとしていることがわかります。 render 関数の Map 関数内で直接 await を実行すると、予期しない動作が発生する可能性があります。これは、マップ関数が同期操作を想定しており、マップ関数内で非同期呼び出しを実行しようとすると、レンダリング プロセスのフローが中断される可能性があるためです。

データの取得と表示の分離

この問題を解決するには、データ取得プロセスを表示ロジックから分離することをお勧めします。レンダリング関数内で非同期操作を実行する代わりに、別のコンポーネントまたはフックでデータのフェッチを開始する方が適切です。

親コンポーネントでの非同期データのフェッチ

このアプローチでは、非同期リクエストの作成とデータの管理を担当する親コンポーネント (ParentThatFetches など) を作成します。ライフサイクル メソッドまたはフックを利用して、親コンポーネントはデータをフェッチし、それを状態に保存します。その後、親コンポーネントは、フェッチされたデータを props として受け取る純粋な機能的な子コンポーネント (例: Child) を条件付きでレンダリングします。 ]

}

this.state = {};

this.state = {};

}

{this.state.data && (
  <Child data={this.state.data} />
)}

{data.map((x, i) => (

this.state = {};

フックを使用したデータのフェッチ

React でのフックの出現により、データのフェッチをさらに簡素化できます。次のコード スニペットは、フックを使用してデータを非同期にフェッチし、それに応じて状態を更新する方法を示しています。
useEffect(() => {

const getData = async () => { const resp = await fetch('some/url'); const json = await resp.json() updateData(json); } getData();

}, []);

データを返す &&
}