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

Question

I would like to read user information and set “Admin” variable to yes if it's custom attributes is equal to 1. The problem is that when I want to read user attributes the program crashes with TypeError: Cannot read property 'attributes' of undefined"

This is my code:

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 (...)

Answer 1

Hi It looks like in the await function you are setting the value of userData inside the then , but outside you are accessing userData.attributes .

So maybe when you are checking userData.attributes the userData hasn't been populated because it is asyncronous Instead of set it inside the then you can assign the response as a new variable using the await , so it will just excecute the next code when the async code has been excecuted.

const user = await Auth.currentUserInfo();

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

Answer 2

I guess that is happening because setUserData() [basically setState()] is an asynchronous function and if block is executing before your state has been set (updated).

Try using setTimeout().

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