在React组件中循环AJAX请求

import React, { Component } from 'react';

class MyComponent extends Component {
  state = {
    data: [],
    isLoading: true,
    error: null
  };

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async () => {
    try {
      const urls = ['url1', 'url2', 'url3']; // 替换为实际的请求URL
      const responses = await Promise.all(urls.map(url => fetch(url))); // 发送多个异步请求

      const data = await Promise.all(responses.map(response => response.json())); // 解析响应数据

      this.setState({ data, isLoading: false });
    } catch (error) {
      this.setState({ error, isLoading: false });
    }
  };

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

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

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

    return (
      <div>
        {data.map(item => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
    );
  }
}

export default MyComponent;