自定义react挂钩多次触发api调用

import { useState, useEffect } from 'react';

const useMultipleAPICalls = (apiEndpoint, numberOfCalls) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(apiEndpoint);
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    for (let i = 0; i < numberOfCalls; i++) {
      fetchData();
    }
  }, [apiEndpoint, numberOfCalls]);

  return data;
};

import React from 'react';
import useMultipleAPICalls from './useMultipleAPICalls';

const MyComponent = () => {
  const apiEndpoint = 'https://api.example.com/data';
  const numberOfCalls = 3;

  const data = useMultipleAPICalls(apiEndpoint, numberOfCalls);

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

export default MyComponent;