如何在React中通过useEffect结合State实现组件重渲染且避免无限循环

你的问题很典型：删除操作只修改了后端数据，但没同步更新前端state，所以组件不会自动重渲染；而如果把employeesData加到useEffect依赖里，又会因为每次setEmployeesData触发useEffect重新请求API，进而再次更新state，形成无限循环。

下面给你几个实用的解决方案，按推荐程度排序：

方案一：删除成功后直接更新本地State（最推荐） #

这是最高效的做法，不用额外发起API请求，直接在删除接口调用成功后，从本地的employeesData中移除对应的员工条目：

修改你的removeEmployee函数：

function removeEmployee(id) {
  axios.delete(`http://localhost:8080/api/employees/${id}`)
    .then(() => {
      // 使用函数式更新，确保拿到最新的state
      setEmployeesData(prevEmployees => 
        prevEmployees.filter(employee => employee.id !== id)
      );
    })
    .catch(error => {
      // 别忘了处理错误，比如给用户提示
      console.error("删除员工失败：", error);
    });
}

这样做既同步了后端数据，又立刻更新了前端的state，组件会自动重渲染，完全不会有无限循环的问题。

方案二：删除成功后重新调用getEmployees（简单直接） #

如果你不想手动处理state的过滤逻辑，可以在删除成功后，重新调用一次获取员工列表的接口：

function removeEmployee(id) {
  axios.delete(`http://localhost:8080/api/employees/${id}`)
    .then(() => {
      // 删除成功后重新拉取最新数据
      getEmployees();
    })
    .catch(error => {
      console.error("删除员工失败：", error);
    });
}

这个方法实现起来最简单，但会多一次API请求，适合数据量不大、业务逻辑简单的场景。

方案三：用useCallback优化避免无限循环（特殊场景用） #

如果因为某些原因，你必须把employeesData作为useEffect的依赖（不推荐这种做法，除非有特殊需求），可以用useCallback来包裹getEmployees函数，确保它的引用稳定：

import { useState, useEffect, useCallback } from 'react';

function Employees() { 
  const [employeesData, setEmployeesData] = useState([]); 

  // 用useCallback包裹，让函数引用稳定
  const getEmployees = useCallback(() => {
    axios.get("http://localhost:8080/api/employees")
      .then((response) => {
        setEmployeesData(response.data);
      })
      .catch(error => {
        console.error("获取员工列表失败：", error);
      });
  }, [setEmployeesData]); // setEmployeesData是React提供的稳定函数，不会触发重渲染

  function removeEmployee(id) { 
    axios.delete(`http://localhost:8080/api/employees/${id}`)
      .then(() => {
        getEmployees();
      })
      .catch(error => {
        console.error("删除员工失败：", error);
      });
  } 

  useEffect(() => { 
    getEmployees(); 
  }, [getEmployees]); // 现在依赖的是稳定的getEmployees，不会无限循环

  // 渲染部分保持不变...
}

不过这个方案其实没必要，前两种方法已经能很好地解决问题了。

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