reactは、データを取得するためにどのようにAPIを呼び出すのですか？

Reactでデータを取得するためには、fetchやaxiosなどのライブラリを使用してAPIを呼び出すことができます。

fetchを使用したサンプルコードは以下の通りです：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 处理获取到的数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

axiosを使用したサンプルコードは以下の通りです。

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    // 处理获取到的数据
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

実際の開発では、通常、データ取得のロジックをReactコンポーネントのライフサイクルメソッド（例えば、componentDidMount）に配置し、コンポーネントがマウントされた直後にデータを取得します。取得したデータはコンポーネントのステートに保存し、それをrenderメソッドで使用します。

たとえば、

import React, { Component } from 'react';
import axios from 'axios';

class MyComponent extends Component {
  state = {
    data: null,
    error: null,
  };

  componentDidMount() {
    axios.get('https://api.example.com/data')
      .then(response => {
        // 更新组件状态
        this.setState({ data: response.data });
      })
      .catch(error => {
        // 更新组件状态
        this.setState({ error: error.message });
      });
  }

  render() {
    const { data, error } = this.state;

    if (error) {
      return <div>Error: {error}</div>;
    }

    if (!data) {
      return <div>Loading...</div>;
    }

    return (
      <div>
        {/* 使用获取到的数据渲染组件 */}
      </div>
    );
  }
}

export default MyComponent;

上記のコードでは、コンポーネントがマウントされた後に componentDidMount メソッドが呼び出され、そのメソッド内で axios を使用してリクエストを送信し、取得したデータをコンポーネントの状態に保存します。render メソッドでは、コンポーネントの状態に基づいて異なるコンテンツをレンダリングします。