React组件中Axios GET请求函数被反复调用问题咨询

安全阿岳

2026-9-29

问题原因

这是React组件的常见问题，请求重复触发一般是以下几个原因导致：

你直接在组件顶层调用了getNextCustID，组件每次渲染都会重新执行函数触发请求
你把getNextCustID放在了useEffect的依赖数组里，但没有用useCallback包裹该函数，每次组件渲染都会生成新的getNextCustID实例，触发useEffect重复执行
React 18+开发环境的严格模式会让组件两次挂载，也会导致请求多触发一次

解决方案

1. 仅需组件加载时拉取一次数据的场景

直接把请求逻辑放到空依赖的useEffect里，保证仅在组件首次挂载时执行一次：

import { useState, useEffect } from 'react'
import Axios from 'axios'

function Customer() {
    var nextCustID = 0
    const [nextCustIDList, setNextCustIDList] = useState([]) 

    useEffect(() => {
        Axios.get("http://localhost:3001/api/getNextCustID").then(response => {
          setNextCustIDList(response.data);
        })
    }, []) // 空依赖数组限制执行时机
}

2. 需要手动触发请求的场景

如果你需要点击按钮等场景主动调用接口，用useCallback包裹函数，避免重复生成新的函数实例：

import { useState, useCallback } from 'react'
import Axios from 'axios'

function Customer() {
    var nextCustID = 0
    const [nextCustIDList, setNextCustIDList] = useState([]) 

    const getNextCustID = useCallback(() => {
        Axios.get("http://localhost:3001/api/getNextCustID").then(response => {
          setNextCustIDList(response.data);
        })
    }, []) // 空依赖保证函数实例仅生成一次

    return <button onClick={getNextCustID}>获取最新客户ID</button>
}