React实现多按钮按对应ID请求不同API的方法

• 当前fetchData函数硬编码了单个API地址，没有参数化能力，两个按钮调用时无法区分要请求的目标接口
• 拿到接口返回的response.data后没有写入组件状态，不会触发React重渲染，拿到的数据无法展示到页面上
• 两个按钮直接绑定无参的fetchData作为点击回调，没有传递对应要请求的接口标识
• 隐性问题：如果直接把fetchData当onClick的回调传，React会把原生点击事件对象作为第一个参数传入函数，会导致请求时把事件对象当URL处理，直接抛出请求错误

1. 提前维护两个按钮对应的接口地址映射，避免代码里散落硬编码的URL
2. 改造fetchData函数为支持传入目标请求URL的通用方法，同时接入React状态存储返回数据、加载状态，搭配简单的错误兜底逻辑
3. 给每个按钮的点击事件绑定单独的触发逻辑，传入对应按钮的目标接口地址
4. 在页面新增结果展示区域，根据组件状态渲染加载提示、请求结果、初始提示内容

import React, { useState } from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import ScotchInfoBar from "./ScotchInfoBar";
import "./styles.css";

// 集中维护按钮和对应接口的映射关系
const API_ENDPOINTS = {
  data1: "https://mocki.io/v1/be3cb19b-bd49-4a82-b19b-44b859e19d5d",
  data2: "https://mocki.io/v1/4d51be0b-4add-4108-8c30-df4d60e8df54"
};

function App() {
  // 新增状态：存储接口返回数据、加载状态
  const [apiResult, setApiResult] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  // 通用请求方法，接收目标接口地址作为参数
  const fetchData = async (targetUrl) => {
    setIsLoading(true);
    try {
      const res = await axios.get(targetUrl);
      // 将返回结果写入组件状态，触发页面重渲染
      setApiResult(res.data);
    } catch (error) {
      setApiResult({ errorMsg: "接口请求失败，请检查网络或接口可用性" });
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="App">
      {/* 按钮区域 */}
      <div>
        <button 
          className="fetch-button" 
          onClick={() => fetchData(API_ENDPOINTS.data1)}
        >
          Data1
        </button>
        <button 
          className="fetch-button" 
          onClick={() => fetchData(API_ENDPOINTS.data2)}
        >
          Data2
        </button>
        <br />
      </div>

      {/* 结果展示区域 */}
      <div className="result-container">
        {isLoading ? 
          <p>数据加载中...</p> :
          apiResult ? 
            <pre>{JSON.stringify(apiResult, null, 2)}</pre> :
            <p>点击上方按钮拉取对应接口数据</p>
        }
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

• 写按钮点击事件时不要直接把fetchData作为回调传入，要用箭头函数包裹一层，显式传入对应接口地址，避免React原生事件对象被当成参数传入请求函数
• 接口返回的数据必须通过setState存入组件状态，不能只写一句response.data的独立语句，不然数据不会触发页面更新
• 增加基础的加载状态和错误捕获，避免请求过程中页面无反馈、请求失败时无提示的体验问题

内容的提问来源于stack exchange，提问作者sneha