React レンダー関数内で Async Await を直接使用できますか?

React のレンダリング関数での非同期待機

問題:
React のレンダリング関数で非同期待機機能を使用したいと考えています。バックエンド API からのデータのフェッチなどの非同期操作を実行するコンポーネント。ただし、render 関数内で await キーワードが認識されないという問題が発生します。

解決策:

クラス コンポーネントの render メソッドで async キーワードを使用することはできますが、 、パフォーマンスを考慮すると、これはお勧めできません。代わりに、データの取得と表示を 2 つの異なるコンポーネントに分離することをお勧めします:

親コンポーネント (データ取得):

<code class="javascript">class ParentComponent extends React.Component {
  constructor() {
    super();
    this.state = { data: null };
  }

  componentDidMount() {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return this.state.data ? <ChildComponent data={this.state.data} /> : null;
  }
}</code>

子コンポーネント (データ)表示):

<code class="javascript">const ChildComponent = ({ data }) => {
  return (
    <table>
      <tbody>
        {data.map((item, index) => (
          <tr key={index}>
            <td>{item.name}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};</code>

説明:

• 親コンポーネント ParentComponent は、フェッチ関数を使用して API からのデータのフェッチを処理します。
• データを受信すると、データの状態が設定され、再レンダリングがトリガーされます。
• レンダリング メソッドで、親コンポーネントは状態のデータ プロパティが存在するかどうかを確認します。存在する場合、子コンポーネント ChildComponent をレンダリングし、取得したデータを props として渡します。
• ChildComponent は、テーブルにデータを表示する純粋な機能コンポーネントです。

注:

React フックベースのコンポーネントの場合、useEffect フックを使用してデータをフェッチし、コンポーネントの状態を更新し、データフェッチロジックをレンダリング関数から分離できます。

以上がReact レンダー関数内で Async Await を直接使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。