Javascript 为什么通知组件不工作

我正在尝试使react组件在使用时显示通知。 问题是它不能正常工作。。。 当用户使用错误提供商的电子邮件登录时，应显示通知

我要做的是，在用户登录后检查其电子邮件，如果邮件中没有正确的提供商，我将其注销

现在发生的事情是，在用户注销后，通知很快就会显示和消失，尽管我为此做了很长的间隔

我尝试在react UI框架中使用材质UI进行实验。 到目前为止没有任何进展

Navbar.js

import React, { Component } from "react";
import withFirebaseAuth from "react-with-firebase-auth";
import * as firebase from "firebase/app";
import firebaseConfig from "../../firebase.config";
import "firebase/auth";
// Material UI
import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import AccountCircle from "@material-ui/icons/AccountCircle";
import Tooltip from "@material-ui/core/Tooltip";
import Notify from "../notification/notification"


const firebaseApp = firebase.initializeApp(firebaseConfig);

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  menuButton: {
    marginRight: theme.spacing(2)
  },
  title: {
    flexGrow: 1
  }
}));

const filler = () => {console.log(' ')}

function HomeNav(props) {
  const { user, signOut, signInWithGoogle } = props;
  const classes = useStyles();
  const userMail = (user)?user.email.includes("@hijrah.org"):'';
  let notify = false;
  if(user && !userMail){
    signOut();
    notify = true;
  }

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="menu"
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            News
          </Typography>      
          {user? (
            <Tooltip title={user.displayName}>
              <IconButton
                edge="end"
                aria-label="account of current user"
                aria-haspopup="true"
                onClick={signOut}
                color="inherit"
                >
                <AccountCircle />
              </IconButton>
            </Tooltip>
          ) : (   
            <Button color="inherit" onClick={signInWithGoogle}>
                  Login
            </Button>
          )}
        </Toolbar>
      </AppBar>
      <React.Fragment>
        {/*this is the part where i try to display notification on*/}
        {(notify)? <Notify /> : <span></span>}
      </React.Fragment>
    </div>
  );
}

class Nav extends Component {
  render() {
    return <HomeNav {...this.props} />;
  }
}

const firebaseAppAuth = firebaseApp.auth();
const providers = {
  googleProvider: new firebase.auth.GoogleAuthProvider()
};
providers.googleProvider.setCustomParameters({hd:"hijrah.org"});

export default withFirebaseAuth({
  providers,
  firebaseAppAuth
})(Nav);

import React，{Component}来自“React”；
从“使用firebase auth进行反应”导入使用firebase auth；
从“firebase/app”导入*作为firebase；
从“../../firebase.config”导入firebaseConfig；
导入“firebase/auth”；
//材料界面
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/Typography”导入排版；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/IconButton”导入图标按钮；
从“@物料界面/图标/菜单”导入菜单图标；
从“@material ui/icons/AccountCircle”导入AccountCircle；
从“@material ui/core/Tooltip”导入工具提示；
从“./通知/通知”导入通知
const firebaseApp=firebase.initializeApp（firebaseConfig）；
const useStyles=makeStyles（主题=>({
根目录：{
flexGrow:1
},
菜单按钮：{
边缘光：主题。间距（2）
},
标题：{
flexGrow:1
}
}));
常量填充符=（）=>{console.log（“”）}
家庭导航功能（道具）{
const{user，signOut，signInWithGoogle}=props；
const classes=useStyles（）；
const userMail=（user）？user.email.includes（“@hijrah.org”）：”；
让notify=假；
if（用户&&！用户邮件）{
签出（）；
通知=真；
}
返回(
新闻
{用户(
) : (   
登录
)}
{/*这是我尝试在*/}上显示通知的部分
{（通知）？：}
);
}
类Nav扩展组件{
render（）{
返回；
}
}
const firebaseAppAuth=firebaseApp.auth（）；
常量提供程序={
googleProvider:new firebase.auth.GoogleAuthProvider（）
};
providers.googleProvider.setCustomParameters（{hd:“hijrah.org”}）；
使用FireBaseAuth导出默认值({
提供者，
firebaseAppAuth
})（导航）；

我的通知组件notify.js

import React from "react";
import PropTypes from "prop-types";
import clsx from "clsx";
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
import ErrorIcon from "@material-ui/icons/Error";
import InfoIcon from "@material-ui/icons/Info";
import CloseIcon from "@material-ui/icons/Close";
import { amber, green } from "@material-ui/core/colors";
import IconButton from "@material-ui/core/IconButton";
import Snackbar from "@material-ui/core/Snackbar";
import SnackbarContent from "@material-ui/core/SnackbarContent";
import WarningIcon from "@material-ui/icons/Warning";
import { makeStyles } from "@material-ui/core/styles";

const variantIcon = {
  success: CheckCircleIcon,
  warning: WarningIcon,
  error: ErrorIcon,
  info: InfoIcon
};

const useStyles1 = makeStyles(theme => ({
  success: {
    backgroundColor: green[600]
  },
  error: {
    backgroundColor: theme.palette.error.dark
  },
  info: {
    backgroundColor: theme.palette.primary.main
  },
  warning: {
    backgroundColor: amber[700]
  },
  icon: {
    fontSize: 20
  },
  iconVariant: {
    opacity: 0.9,
    marginRight: theme.spacing(1)
  },
  message: {
    display: "flex",
    alignItems: "center"
  }
}));

function MySnackbarContentWrapper(props) {
  const classes = useStyles1();
  const { className, message, onClose, variant, ...other } = props;
  const Icon = variantIcon[variant];

  return (
    <SnackbarContent
      className={clsx(classes[variant], className)}
      aria-describedby="client-snackbar"
      message={
        <span id="client-snackbar" className={classes.message}>
          <Icon className={clsx(classes.icon, classes.iconVariant)} />
          {message}
        </span>
      }
      action={[
        <IconButton
          key="close"
          aria-label="close"
          color="inherit"
          onClick={onClose}
        >
          <CloseIcon className={classes.icon} />
        </IconButton>
      ]}
      {...other}
    />
  );
}

MySnackbarContentWrapper.propTypes = {
  className: PropTypes.string,
  message: PropTypes.string,
  onClose: PropTypes.func,
  variant: PropTypes.oneOf(["error", "info", "success", "warning"]).isRequired
};

export default function CustomizedSnackbars() {
  const [open, setOpen] = React.useState(true);

  const handleClose = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }

    setOpen(false);
  };

  return (
    <div>
      <Snackbar
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
        open={open}
        autoHideDuration={60000}
        onClose={handleClose}
      >
        <MySnackbarContentWrapper
          onClose={handleClose}
          variant="warning"
          message="Please login with a @hijrah.org mail"
        />

      </Snackbar>
    </div>
  );
}

从“React”导入React；
从“道具类型”导入道具类型；
从“clsx”导入clsx；
从“@material ui/icons/CheckCircle”导入CheckCircleIcon；
从“@material ui/icons/Error”导入ErrorIcon；
从“@material ui/icons/Info”导入信息图标；
从“@material ui/icons/Close”导入CloseIcon；
从“@material ui/core/colors”导入{琥珀色，绿色}”；
从“@material ui/core/IconButton”导入图标按钮；
从“@material ui/core/Snackbar”导入Snackbar；
从“@material ui/core/SnackbarContent”导入SnackbarContent；
从“@material ui/icons/Warning”导入警告图标；
从“@material ui/core/styles”导入{makeStyles}”；
常数方差={
成功：CheckCircleIcon，
警告：警告图标，
错误：错误图标，
信息：信息图标
};
const useStyles1=makeStyles（主题=>({
成功：{
背景颜色：绿色[600]
},
错误：{
背景色：theme.palete.error.dark
},
信息：{
背景色：theme.palete.primary.main
},
警告:{
背景颜色：琥珀色[700]
},
图标：{
尺寸：20
},
iconVariant：{
不透明度：0.9，
边缘光：主题。间距（1）
},
信息：{
显示：“flex”，
对齐项目：“中心”
}
}));
函数mysnakBarContentWrapper（props）{
const classes=useStyles1（）；
const{className，message，onClose，variant，…other}=props；
常量图标=变量图标[变量]；
返回(
);
}
MySnackbarContentWrapper.propTypes={
类名：PropTypes.string，
消息：PropTypes.string，
onClose:PropTypes.func，
变体：PropTypes.oneOf（[“错误”、“信息”、“成功”、“警告”）。需要
};
导出默认函数CustomizedSnackbars（）{
const[open，setOpen]=React.useState（true）；
const handleClose=（事件、原因）=>{
如果（原因==“单击离开”）{
返回；
}
setOpen（假）；
};
返回(
);
}

---

我希望在注销用户后显示错误消息，并将其保留5秒钟。

我怀疑当用户注销时，

Nav

组件不再呈现，因此

Notify

组件也不再呈现，因为它是

Nav

（Nav>>HomeNav>>Notify）的子组件. 由于不再呈现该消息，因此该消息将消失

如果是这种情况，则应将应用程序中的

Notify

移动到更高级别，以便无论用户是否登录都能显示