React状态受异步影响？如何稳定填充userInfo变量

问题根源分析 #

你的代码存在两个核心问题：

1. 状态更新结构错误：调用updateInfo时，你把用户数据嵌套在了userInfo字段里，导致实际状态变成了{userInfo: {name, id}}，而非直接的用户对象。后续访问userInfo.name时，实际是在访问undefined.name，自然会触发属性缺失错误。
2. 空状态下的属性访问错误：初始userInfo是null，直接访问userInfo.name会抛出Cannot read properties of null异常，??运算符无法解决这个问题——因为null.name本身就会报错，根本走不到空值替换的逻辑。

修复步骤 #

1. 修正状态更新逻辑
   去掉状态更新时的嵌套结构，直接传入用户信息对象：

   React.useEffect(() => {
     Auth.currentAuthenticatedUser()
       .then(currentUser => {
         // 直接传递用户信息，不再嵌套userInfo字段
         updateInfo({ 
           name: currentUser.username, 
           id: currentUser.attributes.sub 
         })
       })
       .catch(err => console.log({ err }))
   }, []);
   

2. 安全访问状态属性
   使用**可选链操作符?.**配合空值合并运算符??，确保userInfo为null/undefined时不会报错，同时显示加载提示：

   return (
     <div>
       <div>Support</div>
       <div>
         username?: {userInfo?.name ?? "Loading... "}<br/>
         User id?: {userInfo?.id ?? "Loading... "}<br/>
       </div>
     </div>
   )
   

   也可以用条件渲染的方式，更直观处理加载状态：

   return (
     <div>
       <div>Support</div>
       <div>
         {userInfo ? (
           <>
             username?: {userInfo.name}<br/>
             User id?: {userInfo.id}<br/>
           </>
         ) : (
           <>Loading...</>
         )}
       </div>
     </div>
   )
   

完整修复后的代码 #

function Support() {
  const [userInfo, updateInfo] = React.useState(null);
  React.useEffect(() => {
    Auth.currentAuthenticatedUser()
      .then(currentUser => {
        updateInfo({ 
          name: currentUser.username, 
          id: currentUser.attributes.sub 
        })
      })
      .catch(err => console.log({ err }))
  }, []);

  return (
    <div>
      <div>Support</div>
      <div>
        username?: {userInfo?.name ?? "Loading... "}<br/>
        User id?: {userInfo?.id ?? "Loading... "}<br/>
      </div>
    </div>
  )
}

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