为啥通知组件不起作用

Posted 2023-02-23

【中文标题】为啥通知组件不起作用

【英文标题】：why is notification component not working为什么通知组件不起作用

【发布时间】：2020-02-08 06:56:00

【问题描述】：

我正在尝试制作一个反应组件来显示使用通知。 问题是它不能正常工作...... 当用户使用错误提供商的电子邮件登录时，应该会出现通知

我在做什么是在他登录后检查用户电子邮件，如果邮件不包含正确的提供商，我将他注销。

发生的事情是通知在用户退出后迅速显示和消失，尽管我为它设置了很长的间隔。

我尝试使用材料 UI 和 React 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);

我的通知组件 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>
  );

我希望在我注销用户后显示错误消息并让它停留大约 5 秒。

【参考方案1】：

我怀疑发生了什么，当您注销用户时，Nav 组件不再呈现，因此 Notify 组件也不是，因为它是 Nav 的子组件 (Nav >> HomeNav > > 通知）。因为它不再被渲染，所以消息消失了。

如果是这种情况，您应该在应用中将Notify 移到更高级别，以便无论用户是否登录，它都会显示。