React函数组件调用API后setState引发无限循环问题排查

问题原因 #

你遇到的无限循环是因为：

• 组件函数体中的window.confirm和请求逻辑会在每次组件渲染时执行，包括初始渲染、状态更新（调用setResData）后的重新渲染。
• 当用户确认后，setResData更新状态触发组件重新渲染，重新渲染又会再次弹出确认框，形成无限循环。

修复方案 #

方案1：限制逻辑仅在组件挂载时执行（不推荐，仍有风险） #

如果坚持路由访问时触发操作，用useEffect包裹逻辑，确保仅在组件首次挂载时执行一次：

import { Link } from 'react-router-dom';
import axios from 'axios';
import React, { useState, useEffect } from "react";

const Resetear = () => {
    const [resData, setResData] = useState('');

    useEffect(() => {
        const handleReset = async () => {
            if (window.confirm("¿Realmente desea resetear la base de datos?")) {
                try {
                    const respuesta = await axios.get('http://localhost:5000/resetear');
                    setResData(respuesta.data);
                } catch (res) {
                    setResData(res.code === "ERR_BAD_REQUEST" ? res.response.data : res.message);
                    console.log(res);
                }
            }
        };
        handleReset();
    }, []); // 空依赖数组，仅挂载时执行

    return (
        <div>
            {resData}
        </div>
    );
}

export default Resetear;

方案2：改为按钮触发（更安全、更合理） #

直接通过路由访问就执行数据库重置风险极高，建议改为显示按钮，让用户主动点击后再弹出确认框执行操作：

import { Link } from 'react-router-dom';
import axios from 'axios';
import React, { useState } from "react";

const Resetear = () => {
    const [resData, setResData] = useState('');

    const handleReset = async () => {
        if (window.confirm("¿Realmente desea resetear la base de datos?")) {
            try {
                const respuesta = await axios.get('http://localhost:5000/resetear');
                setResData(respuesta.data);
            } catch (res) {
                setResData(res.code === "ERR_BAD_REQUEST" ? res.response.data : res.message);
                console.log(res);
            }
        }
    };

    return (
        <div>
            <button onClick={handleReset}>重置数据库</button>
            {resData && <p>{resData}</p>}
        </div>
    );
}

export default Resetear;

后端优化建议 #

• 数据库重置属于写操作，建议将HTTP方法从GET改为POST或DELETE，符合REST规范，避免浏览器误触发、爬虫请求导致数据丢失。
• 添加权限验证（如API密钥、用户登录校验），防止未授权的重置操作。

修改后的后端示例：

// server.js
app.post('/resetear', function(req, res) {
    // 可在此添加权限验证逻辑
    inicializarDb.resetear(connection);
    return res.json("Base reseteada");
});

对应前端请求改为axios.post：

const respuesta = await axios.post('http://localhost:5000/resetear');

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