フックを使用した React Render 関数で Async Await を使用する方法

React レンダー関数の非同期待機

問題の理解

コード内では、レンダー関数のマップ関数内で async await を使用しようとします。ただし、非同期関数はレンダリング関数で直接使用できないため、このアプローチは無効です。 React のレンダリング関数は同期コードを想定しています。

正しいアプローチ

レンダリング関数内で非同期操作を使用するには、次の 2 つのアプローチのいずれかに従うことができます:

1.データ フェッチとコンポーネントの分離

データ フェッチ ロジックを、非同期操作を処理する別個のコンポーネントに分離します。次に、データが利用可能な場合にのみ UI コンポーネントを条件付きでレンダリングします。

class ParentComponent extends React.Component {
  constructor() {
    this.state = { data: null };
  }

  componentDidMount() {
    fetch("/some/async/data")
      .then(resp => resp.json())
      .then(data => this.setState({ data }));
  }

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

const Child = ({ data }) => (
  <table>
    <tbody>
      {data.map((x, i) => (
        <tr key={i}>
          {x.map((y, j) => <td key={j}>{y}</td>)}
        </tr>
      ))}
    </tbody>
  </table>
);

2.非同期効果のあるフック

非同期操作を管理するには React フックを使用します。

const ParentComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const getData = async () => {
      const resp = await fetch("/some/async/data");
      const json = await resp.json();
      setData(json);
    };
    getData();
  }, []);

  return data ? <Child data={data} /> : null;
};

追加メモ

• の使用例の座標は、実際の経度と緯度の値に置き換えることができます。
• データ レコードに一意の識別子がある場合は、配列インデックスの代わりにキー属性にそれらの識別子を使用します。

以上がフックを使用した React Render 関数で Async Await を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。