在React.js中使用异步/等待并返回状态

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      data: null,
      error: null,
    };
  }

  async componentDidMount() {
    try {
      const data = await fetchData();
      this.setState({
        isLoading: false,
        data: data,
      });
    } catch (error) {
      this.setState({
        isLoading: false,
        error: error,
      });
    }
  }

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

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

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

    return (
      <div>
        {/* Render the fetched data */}
      </div>
    );
  }
}