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

Question

如果它的自定义属性等于 1，我想读取用户信息并将“Admin”变量设置为 yes。 问题是，当我想读取用户属性时，程序因类型错误而崩溃:无法读取未定义的属性‘属性’”

这是我的代码:

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 函数中，您似乎在 then 中设置了 userData 的值，但在外部您正在访问 userData.attributes。

所以也许当您检查 userData.attributes 时，userData 没有被填充，因为它是 asyncronous 而不是在 then 中设置它> 您可以使用 await 将响应分配为新变量，因此它只会在 async 代码执行后执行下一个代码。

const user = await Auth.currentUserInfo();

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