React useEffect依赖配置错误导致持续重复fetch请求如何解决

这是典型的useEffect使用不当导致的无限重渲染死循环，不属于预期行为：

• 未传入依赖数组的useEffect，会在组件每一次渲染完成后全量执行
• 你在effect回调中执行setGroups(data)更新组件状态，会直接触发组件重渲染
• 重渲染完成后会再次执行无依赖的effect回调，再次发起请求、更新状态、触发重渲染，最终形成无限循环，短时间内产生大量请求和控制台日志。
  

• 禁止将JSX元素/渲染生成的DOM节点类值加入useEffect依赖数组：你代码里的createGroup是每次组件渲染时通过map新生成的数组，哪怕渲染内容完全一致，数组的引用地址每次都会变化，加入依赖只会稳定触发无限循环，没有任何实际意义。
• 你提到的「仅当页面上groups数据需要重渲染时才触发数据拉取」逻辑本身存在因果倒置：数据拉取是groups更新的触发原因，重渲染是groups更新后的执行结果，把渲染结果作为数据拉取的触发条件，必然会形成死循环。
• 你之前传入[groups]作为依赖没有解决问题，是因为effect回调内每次都会执行setGroups更新groups状态，groups变化会再次触发effect执行，本质还是死循环。

根据你的业务场景选择对应实现即可：

场景1：页面加载时拉取一次全部分组数据（适配你当前的代码逻辑） #

这是静态列表拉取的通用实现，给useEffect传入空依赖数组[]，副作用逻辑仅会在组件首次挂载完成后执行一次，不会重复触发：

useEffect(() => {
  console.log("triggered")
  fetch("http://localhost:8080/group/getAll")
    .then(response => response.json())
    .then(data => {
      setGroups(data)
    })
}, []) // 空依赖，仅挂载时执行一次

额外优化建议：你当前渲染下拉项时使用数组下标i作为key，在列表存在增删、排序操作时会引发渲染异常，建议替换为数据自带的唯一业务标识groupId作为key：

const createGroup = groups.map((group) => {
  return (
    <Dropdown.Item 
      key = {group.groupId}
      onClick = {showUser}
      id = {group.groupId}
    >
      {group.groupName}
    </Dropdown.Item> 
  )
})

渲染位置无需修改：

<Dropdown.Menu>
  {createGroup}
</Dropdown.Menu>

场景2：需要在特定操作/变量变化时重新拉取分组数据 #

如果需要支持手动刷新、关联条件变化时刷新列表，将触发数据更新的源头变量加入依赖数组即可，不要放入groups、渲染结果这类会被effect本身更新的值。
举个手动刷新按钮触发重新拉取的实现示例：

// 刷新标记位
const [refreshCount, setRefreshCount] = useState(0)
// 点击刷新按钮时调用
const handleRefresh = () => {
  setRefreshCount(prev => prev + 1)
}

useEffect(() => {
  fetch("http://localhost:8080/group/getAll")
    .then(response => response.json())
    .then(data => {
      setGroups(data)
    })
}, [refreshCount]) // 仅首次挂载、refreshCount变化时执行拉取

如果分组数据和其他业务条件绑定（比如当前选中的部门、筛选参数），直接将对应业务参数加入依赖数组即可。

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