如何给数组映射生成的每个列表项传递函数以获取对应用户组

你无法直接在map遍历或渲染逻辑中调用异步接口，这类操作会触发重复请求、渲染异常等问题，你可以选择以下两种适配不同场景的实现方式：

方案1：预加载全量用户组（适合用户量较小的场景） #

在组件拿到用户列表数据后，批量请求所有用户的用户组，存入全局状态后直接渲染即可：

// 新增状态存储用户名与对应用户组的映射关系
const [userGroupsMap, setUserGroupsMap] = useState<Record<string, string[]>>({})

// usersData更新时批量拉取所有用户的组信息
useEffect(() => {
  if (!usersData.length) return
  const fetchAllUserGroups = async () => {
    const groupMap: Record<string, string[]> = {}
    // 用Promise.all并发请求，若担心并发过高可改为串行请求
    await Promise.all(usersData.map(async (user) => {
      try {
        const res = await listGroupsForUser(user.Username)
        // 此处的res.Groups请根据你实际接口返回的字段调整
        groupMap[user.Username] = res.Groups || []
      } catch (err) {
        console.error(`获取用户${user.Username}的组信息失败`, err)
        groupMap[user.Username] = []
      }
    }))
    setUserGroupsMap(groupMap)
  }
  fetchAllUserGroups()
}, [usersData])

渲染时直接从状态中取对应数据即可：

const usersComponent = usersData.map((user: any) => (
  <li
    key={user.Username}
    className="px-4 my-2 lg:pl-8 w-full scale-95 transform transition duration-500 hover:scale-100"
  >
    <div>用户名：{user.Username}</div>
    <div>所属用户组：
      {userGroupsMap[user.Username]?.map(group => (
        <span key={group} className="ml-2 px-2 py-0.5 bg-gray-100 rounded text-xs">{group}</span>
      )) || '加载中'}
    </div>
    // 其余渲染逻辑
  </li>
))

return (
  <ul>{usersComponent}</ul>
)

方案2：单用户独立懒加载（适合用户量较大的场景） #

如果用户量过大，批量请求会给接口造成过大压力，可以将单条用户项拆分为独立子组件，在子组件内部单独请求对应用户的组信息：

// 封装独立的用户项子组件
const UserItem = ({ user }: { user: any }) => {
  const [groups, setGroups] = useState<string[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const fetchGroups = async () => {
      try {
        const res = await listGroupsForUser(user.Username)
        setGroups(res.Groups || [])
      } catch (err) {
        console.error(`获取用户${user.Username}的组信息失败`, err)
      } finally {
        setLoading(false)
      }
    }
    fetchGroups()
  }, [user.Username])

  return (
    <li
      className="px-4 my-2 lg:pl-8 w-full scale-95 transform transition duration-500 hover:scale-100"
    >
      <div>用户名：{user.Username}</div>
      <div>所属用户组：
        {loading ? '加载中' : groups.map(group => (
          <span key={group} className="ml-2 px-2 py-0.5 bg-gray-100 rounded text-xs">{group}</span>
        ))}
      </div>
      // 其余渲染逻辑
    </li>
  )
}

父组件直接调用子组件即可：

const usersComponent = usersData.map((user: any) => (
  <UserItem key={user.Username} user={user} />
))

return (
  <ul>{usersComponent}</ul>
)

注意事项 #

• 请务必为异步请求添加错误捕获逻辑，避免单个请求报错导致整个列表渲染失败
• 如果存在用户列表频繁切换的场景，可以添加请求取消逻辑避免内存泄漏
• 若用户组数据不会频繁变动，可以添加本地缓存，避免同一个用户重复请求接口

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