React组件异步渲染问题：修正currentSession()的Promise处理逻辑

核心问题 #

1. 异步Promise未正确处理：currentSession()是异步函数，直接赋值给groups得到的是处于pending状态的Promise，而非实际的群组数组，导致console.log("other groups is: ", groups)输出Promise对象。
2. 非响应式变量无法触发重渲染：直接修改普通变量isGroupOne不会触发React组件重渲染，即便后续isGroupOne变为true，组件视图也不会更新，依然显示「Please log in.」。

具体修改步骤 #

1. 引入React的useState和useEffect钩子，用于管理响应式状态和执行异步副作用。
2. 在useEffect中调用异步函数currentSession()，通过await获取实际的群组数组，再更新状态。
3. 使用includes()替代forEach来判断用户是否在「GroupOne」中，代码更简洁高效。

修改后的完整代码 #

import { fetchAuthSession } from 'aws-amplify/auth';
import { useState, useEffect } from 'react';

function Index() {
  // 用useState定义响应式状态，初始值为false
  const [isGroupOne, setIsGroupOne] = useState(false);
  const [groups, setGroups] = useState([]);

  async function currentSession() {
    try {
      const { accessToken } = (await fetchAuthSession()).tokens ?? {};
      // 增加空值判断，避免accessToken为undefined时报错
      if (!accessToken?.payload) return [];
      const userGroups = accessToken.payload["cognito:groups"] || [];
      console.log("these groups: ", userGroups);
      return userGroups;
    } catch (err) {
      console.log(err);
      return [];
    }
  }

  // 用useEffect执行异步逻辑，组件挂载时触发
  useEffect(() => {
    const fetchGroups = async () => {
      const userGroups = await currentSession();
      setGroups(userGroups); // 更新群组状态
      console.log("other groups is: ", userGroups);
      // 判断是否在GroupOne中，更新状态触发重渲染
      setIsGroupOne(userGroups.includes("GroupOne"));
    };

    fetchGroups();
  }, []); // 空依赖数组确保只执行一次

  return (
    <div>
        {isGroupOne ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
}

export default Index;

修改说明 #

• 状态管理：用useState定义isGroupOne和groups，状态更新时React会自动触发组件重渲染，确保视图同步更新。
• 异步处理：在useEffect中封装异步函数fetchGroups，通过await获取currentSession()返回的实际群组数组，此时console.log("other groups is: ", userGroups)会输出有效数组。
• 空值安全：增加了accessToken和payload的空值判断，避免因未登录或token格式异常导致的报错。
• 简洁判断：用userGroups.includes("GroupOne")替代forEach循环，代码更简洁易读。

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