React调用Express随机数API时无限请求问题及解决方法

你的React组件出现无限重新渲染和持续请求的核心原因是：axios请求直接写在组件函数体中。组件每次渲染时都会执行这段请求代码，当请求返回后调用setNumber更新state，又会触发组件重新渲染，如此循环往复，形成无限请求-渲染的闭环。

使用React的useEffect钩子包裹请求逻辑，并设置空依赖数组，让请求仅在组件首次挂载时执行一次。如果后续需要手动触发请求（比如点击按钮刷新随机数），可以添加触发变量到依赖数组中。

修改后的React组件代码 #

import React, { useEffect, useState } from "react"
import axios from 'axios'

interface Props {

}

export default function RandomNumber(props: Props) {
    const [number, setNumber] = useState(0);

    // 用useEffect包裹请求，空依赖数组确保仅挂载时执行一次
    useEffect(() => {
        axios({
            method: "get",
            url: "/api/random-number",
        }).then((result) => {
            setNumber(result.data.number)
        })
    }, []) // 空数组表示无依赖，仅执行一次

    return (
        <>
            <h1>{number}</h1>
        </>
    )
}

可选：添加手动刷新功能 #

如果需要用户点击按钮刷新随机数，可以添加一个触发状态，比如refreshTrigger，点击按钮时更新它，让useEffect重新执行请求：

import React, { useEffect, useState } from "react"
import axios from 'axios'

interface Props {

}

export default function RandomNumber(props: Props) {
    const [number, setNumber] = useState(0);
    const [refreshTrigger, setRefreshTrigger] = useState(0);

    useEffect(() => {
        axios({
            method: "get",
            url: "/api/random-number",
        }).then((result) => {
            setNumber(result.data.number)
        })
    }, [refreshTrigger]) // 依赖refreshTrigger，每次它变化时重新请求

    return (
        <>
            <h1>{number}</h1>
            <button onClick={() => setRefreshTrigger(prev => prev + 1)}>刷新随机数</button>
        </>
    )
}

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