如何优化SPO角色分配查询逻辑，避免forEach内每次调用setState重复渲染

你之前的实现存在两个核心问题：

1. 循环内每次执行setState都会触发组件重渲染，用户量大时性能损耗严重
2. 之前尝试的局部数组收集结果方案失败，是因为forEach不支持异步等待，函数执行结束时异步查询请求还未返回，数组尚未填充

优化后完整代码 #

private _permJeChange = async () => {
  // 先清空现有用户名
  this.setState({
    userNames: []
  });

  const theId = this.state.SelPermJEDD;
  const theId2 = theId.replace('JE','');

  // 获取当前列表项的所有权限分配ID
  const info = await sp.web.lists.getByTitle('MyList').items.getById(theId2).roleAssignments();
  const principalIds = info.map(a => a.PrincipalId);

  // 批量构造所有用户查询Promise，独立处理权限组异常
  const userQueryPromises = principalIds.map(async (principalId) => {
    try {
      const userInfo = await sp.web.siteUsers.getById(principalId).get();
      return userInfo.Title;
    } catch (err) {
      console.error("This JEForm contains a group");
      // 权限组查询失败返回空值，后续统一过滤
      return null;
    }
  });

  // 等待所有查询请求完成，过滤无效的权限组返回结果
  const allQueryResults = await Promise.all(userQueryPromises);
  const validUserNames = allQueryResults.filter(Boolean) as string[];

  // 仅执行一次setState更新，只触发一次组件重渲染
  this.setState({
    userNames: validUserNames
  });
}

优化说明 #

• 重渲染次数从用户数量次降低到1次，性能提升显著
• 所有用户查询请求并发执行，和原有实现的请求耗时一致，没有额外性能损耗
• 保留了原有权限组的异常处理逻辑，功能完全兼容原有实现
• 不需要额外声明全局/局部临时数组存储结果，逻辑更简洁

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