为什么通知组件不起作用

Question

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

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

发生的事情是，尽管我为它设置了很长的时间间隔，但在注销用户后通知会出现并迅速消失。

我尝试使用 material 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);

我的通知组件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 秒。

Answer 1

我怀疑发生了什么，当您注销用户时，Nav 组件不再呈现，因此 Notify 组件也不再呈现，因为它是 [=10] 的子组件=] (Nav >> HomeNav >> Notify)。因为它不再呈现消息消失。

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

为什么通知组件不起作用

why is notification component not working

javascript

reactjs

snackbar