在MenuItem中添加AWS Amplify退出登录按钮时函数未定义求助

步骤1：导入Amplify Auth模块 #

确保你已经从AWS Amplify核心库中导入Auth模块，这是实现退出功能的基础：

import { Auth } from 'aws-amplify';

步骤2：编写退出登录处理函数 #

在组件的函数定义区域添加handleSignOut函数，调用Amplify的signOut方法完成退出，同时关闭菜单：

const handleSignOut = async () => {
  try {
    await Auth.signOut();
    handleMenuClose(); // 退出后关闭弹出菜单
  } catch (error) {
    console.error('退出登录失败:', error);
  }
};

步骤3：添加Sign Out菜单项 #

在你的Menu组件中新增一个MenuItem，绑定刚才编写的handleSignOut函数：

<Menu
  anchorEl={anchorEl}
  anchorOrigin={{
    vertical: "top",
    horizontal: "right",
  }}
  id={menuId}
  keepMounted
  transformOrigin={{
    vertical: "top",
    horizontal: "right",
  }}
  open={isMenuOpen}
  onClose={handleMenuClose}
>
  <MenuItem onClick={handleMenuClose}>Profile</MenuItem>
  <MenuItem onClick={handleMenuClose}>My account</MenuItem>
  <MenuItem onClick={handleSignOut}>Sign out</MenuItem> {/* 新增退出菜单项 */}
</Menu>

额外排查点 #

• 确认项目已完成AWS Amplify初始化配置（即调用过Amplify.configure()）
• 检查Auth模块的导入路径和拼写是否正确
• 确保用户处于已登录状态，未登录时signOut方法可能触发异常

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