如何解决React.js中循环内发起Http请求导致的无限循环问题

核心问题定位 #

无限循环的根因来自函数传参语法错误 + 渲染引用不稳定 + 异步请求触发状态循环更新三个叠加问题：

1. 函数调用语法错误：两处代码只返回函数引用未执行，且每次渲染生成新的匿名函数，触发子组件频繁重渲染
2. 异步函数依赖的状态（filterrooms/selectedUser）在请求完成后被更新，反过来触发函数重新生成，形成渲染-请求-更新的循环
3. 逐次await发送请求会多次触发状态更新，放大循环概率

可落地解决步骤 #

• 修复函数调用的语法错误
  先修改Main.ts的传值，直接传递函数引用避免生成匿名函数：

  // Main.ts 修改后
  <UserForm 
    selectedUser={selectedUser} 
    formType={addOrEditUser} 
    isVisible={displayUserForm} 
    onSave={saveUser} 
    onDismiss={dismissForm} 
    GroupFilterSelection={GroupSelectionFilter} 
    RoomFilterSelection={roomSelectionFilter} 
    OnAddUser={AddRoomUser} 
  />
  

  再修改Form.ts的按钮点击事件，直接绑定函数：

  <PrimaryButton 
    className="mt-4" 
    onClick={OnAddUser} 
  >{t('Add userRoom')}</PrimaryButton>
  

• 用useCallback稳定函数引用，避免不必要重渲染
  给异步处理函数包useCallback，明确声明依赖项，仅当依赖变化时才生成新函数：

  // Main.ts 头部引入
  import { useCallback, useState } from 'react'
  
  // 加执行锁避免重复触发
  const [isProcessing, setIsProcessing] = useState(false)
  
  const AddRoomUser = useCallback(async () => {
    if(isProcessing) return
    setIsProcessing(true)
    try {
      if(filterrooms?.length && selectedUser){
        // 批量发送请求合并状态更新，减少重渲染次数
        const requests = filterrooms.map(i => {
          const item : RoomUser = {
            UsersId :selectedUser.UsersId,
            UsersName : selectedUser.User,
            RoomId :i.RoomId
          }
          return dispatch(AddUserRoom(item))
        })
        await Promise.all(requests)
      }
    } finally {
      setIsProcessing(false)
    }
  }, [filterrooms, selectedUser, dispatch, isProcessing])
  

• 检查AddUserRoom的状态更新逻辑，不要在请求完成后直接修改filterrooms、selectedUser这些AddRoomUser的依赖项，如果必须修改建议把更新逻辑放到请求全部完成之后一次性执行。

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