React.js从AWS读取用户信息并设置变量状态

2024-05-03 • 问答

我想读取用户信息，并将自定义属性等于1的“ Admin”变量设置为yes。问题是，当我想读取用户属性时，程序因TypeError崩溃：无法读取未定义的属性“属性”

这是我的代码：

import React,{ useState,useEffect } from "react";
import './App.css';
import { Link,withRouter } from "react-router-dom";
import { Nav,Navbar,NavItem,Image } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";
import Routes from "./Routes";
import { Auth } from "aws-amplify";
import logo from './img/download.svg';


function App(props) {
    const [isAuthenticating,setIsAuthenticating] = useState(true);
    const [isAuthenticated,userHasAuthenticated] = useState(false);
    const [userData,setUserData] = useState([]);
    const [isAdmin,setIsAdmin] = useState(true);

    useEffect(() => {
      onLoad();
    },[],);

    async function handleLogout() {
      await Auth.signOut();
      userHasAuthenticated(false);
      setIsAdmin(false);
      props.history.push("/login");
    }

    async function onLoad() {
      try {
        await Auth.currentSession();
        userHasAuthenticated(true);
        await Auth.currentUserInfo().then(user => setUserData(user));
        if (userData.attributes['custom:isAdmin'] === "1" ) {
          setIsAdmin(true)
        }
      }
      catch(e) {
        if (e !== 'No current user') {
        alert(e);
      }
    }

    setIsAuthenticating(false);
  }

return (...)

嗨，好像在await函数中，您在userData内设置then的值，但在外部访问userData.attributes。

因此，也许当您检查userData.attributes时，由于填充了asyncronous，所以userData尚未填充，您可以使用以下方法将响应分配为新变量，而不是在then中进行设置： await，因此它将在执行async代码后立即执行下一个代码。

const user = await Auth.currentUserInfo();

if(user.attributes['custom:isAdmin'] === "1" ) {
  setUserData(user);
  setIsAdmin(true);
}

我想发生这种情况是因为setUserData（）[基本上是setState（）]是一个异步函数，并且如果在设置（更新）状态之前执行块。

尝试使用setTimeout（）。

await Auth.currentUserInfo().then(user => setUserData(user));
    setTimeout(()=>{
       if(userData.attributes['custom:isAdmin'] === "1" ) {setIsAdmin(true)}
     },0)

React.js从AWS读取用户信息并设置变量状态

wxyxxlh 回答：React.js从AWS读取用户信息并设置变量状态

大家都在问