React.js Чтение информации пользователя из AWS и установка состояния переменной

Question

Я хотел бы прочитать информацию о пользователе и установить переменную «Admin» в значение yes, если его пользовательские атрибуты равны 1. Проблема в том, что когда я хочу прочитать пользовательские атрибуты, программа вылетает с помощью TypeError: Невозможно прочитать свойство 'attribute'из неопределенного "

Это мой код:

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

Привет Похоже, что в функции await вы устанавливаете значение userData внутри then, но снаружи вы получаете доступ к userData.attributes.

Так что, возможно, когда вы проверяете userData.attributes, userData не был заполнен, потому что он asyncronous Вместо того, чтобы устанавливать его внутри then, вы можете назначить ответ как новую переменную, используя await, поэтому он будет просто выполнять следующий код, когда код async был исключен.

const user = await Auth.currentUserInfo();

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

Answer 2

Я предполагаю, что это происходит потому, что setUserData () [в основном setState ()] является асинхронной функцией, и если блок выполняется до того, как ваше состояние было установлено (обновлено).

Попробуйте использовать setTimeout ().

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