React:如何在不同的按钮点击上加载不同的api

import React, { useState } from 'react';

const App = () => {
  const [apiData, setApiData] = useState(null);

  const handleButtonClick = (api) => {
    // 根据按钮点击设置状态变量为相应的API数据
    if (api === 'api1') {
      setApiData('API 1 数据');
    } else if (api === 'api2') {
      setApiData('API 2 数据');
    } else if (api === 'api3') {
      setApiData('API 3 数据');
    }
  };

  return (
    <div>
      <button onClick={() => handleButtonClick('api1')}>加载API 1</button>
      <button onClick={() => handleButtonClick('api2')}>加载API 2</button>
      <button onClick={() => handleButtonClick('api3')}>加载API 3</button>

      {apiData && <div>{apiData}</div>}
    </div>
  );
};

export default App;