React中点击按钮触发Axios GET请求的实现方法

核心思路是把API请求逻辑封装为可复用的独立函数，同时供组件首次加载和按钮点击两个场景调用，具体修改如下： #

第一步：修改App组件代码 #

你需要把原来写在useEffect里的请求逻辑抽离成单独的函数，再把这个函数作为handleClick属性传递给子组件：

import axios from "axios";
import React,{useState, useEffect, useCallback} from 'react';
import ReactDOM from 'react-dom';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

// 先定义你的API地址，这里替换成你实际的接口地址
const baseURL = "你的随机名言接口地址";

export default function App(){
  const [randomQuote,setRandomQuote] = useState('');

  // 封装独立的请求函数，用useCallback缓存避免不必要的重渲染
  const fetchRandomQuote = useCallback(() => {
    axios.get(baseURL)
      .then((res)=> {
        setRandomQuote(res.data);
      })
      .catch(err => {
        // 可以在这里加错误处理逻辑
        console.error("请求名言失败：", err);
      });
  }, [])

  // 组件首次挂载时调用请求函数
  useEffect(
   () => {
      fetchRandomQuote();
    }, [fetchRandomQuote]
  );

  if (!randomQuote) return null;

  return (
    <div>
      <QuoteCard 
        quote={randomQuote.content} 
        author={randomQuote.author}
        handleClick={fetchRandomQuote} // 把请求函数传递给子组件
      />
    </div>
  )
}

第二步：子组件无需修改 #

你现有的QuoteCard组件已经正确绑定了onClick={props.handleClick}，点击Generate按钮就会自动触发父组件传递的请求函数，拉取新的随机名言并更新状态。 #

可选优化 #

如果需要避免用户快速重复点击发起多次请求，可以加一个加载状态控制：

// 在App组件里新增加载状态
const [loading, setLoading] = useState(false);

const fetchRandomQuote = useCallback(() => {
  if (loading) return; // 加载中直接拦截
  setLoading(true);
  axios.get(baseURL)
    .then((res)=> {
      setRandomQuote(res.data);
    })
    .catch(err => {
      console.error("请求名言失败：", err);
    })
    .finally(() => {
      setLoading(false); // 请求完成不管成功失败都重置加载状态
    })
}, [loading])

你可以把loading状态传给子组件，控制按钮的禁用状态或者显示加载动画。

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