React结合AWS Amplify 渲染表格时调用异步函数无返回值问题咨询

问题核心成因 #

你遇到的渲染无输出的情况，本质是两个硬逻辑卡点：

• getUserGroups是异步函数，JS执行到这里会立刻返回一个未完成的Promise对象，React在同步渲染流程里遇到这种不可直接渲染的值，不会输出任何内容。这和你把函数绑在按钮onClick上能正常运行不冲突——onClick触发的是脱离渲染流程的事件回调，执行逻辑和渲染阶段的同步调用完全不在一个执行上下文中。
• 原有getUserGroups的返回链路是断的：你给AWS SDK的方法传了回调函数，回调里写的return值既不会被外层的await捕获，也不会作为外层async函数的返回值，哪怕请求正常发出去了，函数最终能吐出来的值也是undefined。

对应解决思路 #

第一步：先修正getUserGroups的返回逻辑 #

不要混用AWS SDK的回调写法和async/await写法，把返回链路打通：

const getUserGroups = async (userEmail) => {
  try {
    // 显式调用.promise()方法，去掉回调参数，让await能正确捕获接口返回值
    const res = await cognitoIdentityServiceProvider.adminListGroupsForUser({
      UserPoolId: '你的UserPoolId',
      Username: userEmail
    }).promise()
    // 按业务判断返回对应字符串
    return res.Groups?.length ? 'Yes' : 'No'
  } catch (err) {
    // 加错误兜底，避免接口异常时表格空内容
    return '校验失败'
  }
}

注：原来你写的回调里的return是拿不出去的，AWS SDK v2只有显式调用.promise()的模式，才能把请求结果包装成可被async/await等待的Promise对象，不然await拿到的就是空值。

第二步：不要在表格渲染的map流程里直接跑异步请求 #

React的渲染是同步执行的，异步请求的结果要存在组件状态里，等结果返回后再触发重渲染，别把异步逻辑嵌在渲染过程中。常规实现流程是：

1. 先正常拉取全量用户列表（这部分你目前已经能正常运行）
2. 拉取到用户列表后，并行遍历每个用户调用修好的getUserGroups接口，把结果合并到对应的用户对象上
3. 等所有请求完成后，把带校验结果的用户列表存到组件状态里，再触发表格渲染

示例代码：

// 拉取带组校验结果的用户列表
const loadUserList = async () => {
  // 你现有逻辑：拉全量用户
  const allUsers = await fetchAllUsersFromAmplify()
  // 并行拉每个用户的组校验结果
  const usersWithGroupStatus = await Promise.all(
    allUsers.map(async (user) => {
      const groupStatus = await getUserGroups(user.email)
      // 把校验结果作为用户对象的新增属性
      return {...user, groupStatus}
    })
  )
  // 更新组件状态，触发重渲染
  setUserTableData(usersWithGroupStatus)
}

渲染表格的时候直接取状态里存好的校验值就行，完全不需要在渲染阶段跑异步：

<td>{user.groupStatus}</td>

优化提醒 #

如果拉取的用户量很大，一次性并行发几十上百个adminListGroupsForUser请求很容易触发AWS的API限流，可以给每个行的初始值设为“校验中”，按小批次逐行拉取更新状态，降低并发压力。

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