如何阻止函数无限调用？未点按钮却触发删除函数问题

我编写的代码出现无限运行的情况，从终端输出可见。删除函数已绑定到按钮上，但我并未点击该按钮，它却自动执行了，请问该如何阻止这种无限调用？

相关代码 #

server.js #

app.get("/getMaintenanceTypes",(req,res)=>{
      pool.query(`Select * from maintenancetypes`, (err, result) => {
        if(!err){
          console.log("maintanencetypes", result.rows);
          res.status(200).send(result.rows);
        }else{
          res.status(404).json(err.message)
          console.log("maintanencetypes", err.message)
        }
      })
    })

main.js #

const getMainTypes = async () => {
    const response = await axios.get(`${serverBaseUrl}/getMaintenanceTypes`);
    //console.log("response", response.data);
    const response2 = [];
    for (var i = 0; i < response.data.length; i++) {
      let entry = {
        id: null,
        title: "",
        description: "",
      };
      entry.id = response.data[i].id;
      entry.title = response.data[i].title;
      entry.description = response.data[i].description;

      response2.push(entry);
      //console.log("entry", entry);
    }
    console.log("RESPONSE2", response2);

    return response2;
  }


async function deleteAllMainTypes() {
    try {
      const resp = await axios.delete(
        `${serverBaseUrl}/deleteAllMainTypes`
      );
    } catch (error) {
      console.log(error);
    }
    const maintenanceList = await getMainTypes();
    //console.log("main list", maintenanceList);
    setMaintenanceList(maintenanceList);
  };



const deleteHandler = () => {
    deleteAllMainTypes();
  }



<Button onClick={deleteHandler} >Delete All</Button>

问题分析与解决办法 #

1. 定位自动触发源
   先在deleteAllMainTypes函数开头加日志，追踪调用来源：

   async function deleteAllMainTypes() {
       console.log("删除函数被触发");
       // 原有代码...
   }
   

   通过终端日志的调用栈，找到函数被意外触发的具体位置。

2. 常见触发原因与修复

   • 组件渲染时意外调用：检查组件顶层、useEffect或其他渲染相关逻辑中，是否直接执行了deleteAllMainTypes()或deleteHandler()。如果是在useEffect里，要添加正确的依赖数组，避免无限制触发。
   • 状态更新循环：setMaintenanceList会触发组件重渲染，如果重渲染过程中又不小心触发了删除函数，会形成「状态更新→重渲染→触发删除→状态更新」的循环。需要确保删除逻辑只在按钮点击时执行，和状态更新解耦。
   • 事件绑定错误：确认按钮的onClick绑定是传递函数引用（你当前的onClick={deleteHandler}写法是正确的），不要写成onClick={deleteHandler()}——后者会在组件渲染时直接执行函数。
   • 后端接口逻辑：检查/deleteAllMainTypes接口的实现，是否存在逻辑错误导致前端重复请求，进而触发循环。

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