Reactjs 如何在“错误登录”后弹出材质ui snackbar警报

我想在有人发送错误的用户名或密码时弹出一个material ui snackbar警报，主要问题是我对react和material ui没有经验。这是一个预配置的练习，用于处理401错误后卡住的登录页面。我在AuthService.js上通过简单的尝试解决了这个问题，如下所示：

    const login = async (usernameOrEmail, password) => {
    let response;
    try {
        response = await api.post('/auth/signin', {usernameOrEmail, password});
    } catch (error) {
        response = error;
        alert("Bad credentials, please try again");
    }

    return response;
}

现在我想要的是使用材质ui snackbar而不是警报，Auth.page.js的外观如下：

...all the imports

const AuthPage = ({history}) => {
  const { auth, dispatch } = useContext(AuthContext);
  const classes = styles();

  if (auth.isAuthenticated) {
    history.push("/");
  }

  const submitLoginForm = async ({email, password}, actions) => {
    const loginResponse = await authService.login(email, password);
    if (!_.isEmpty(loginResponse.data)) {
      const {accessToken, tokenType} = loginResponse.data;
      localStorage.setItem('accessToken', accessToken);
      localStorage.setItem('tokenType', tokenType);

      const userResponse = await authService.getCurrentUser();
      if (!_.isEmpty(userResponse.data)) {
        const user = userResponse.data;
        localStorage.setItem('user', JSON.stringify(user));
        dispatch({type: 'login'});
      }
    }
    history.push('/');
  };

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
        <Formik
          onSubmit={submitLoginForm}
          validationSchema={validationSchema}
          render={(
            values,
            errors,
            setSubmitting,
            setValues,
            isSubmitting,
          ) => (
            <Form className={classes.form}>
              <Field
                variant="outlined"
                margin="normal"
                required
                fullWidth
                id="email"
                label="Email Address"
                name="email"
                autoComplete="email"
                autoFocus
                component={TextField}
              />
              <Field
                variant="outlined"
                margin="normal"
                required
                fullWidth
                name="password"
                label="Password"
                type="password"
                id="password"
                autoComplete="current-password"
                component={TextField}
              />
              <Button
                type="submit"
                fullWidth
                variant="contained"
                color="primary"
                className={classes.submit}
              >
                Sign In
              </Button>
            </Form>
          )}
        >
        </Formik>
      </div>
    </Container>
  );
};

AuthPage.propTypes = {
  match: PropTypes.object.isRequired,
  location: PropTypes.object.isRequired,
  history: PropTypes.object.isRequired
};

export default withRouter(AuthPage);

最后是一个主要问题，我在哪里以及如何设置material ui snackbar，以便在我的try-and-catch中捕捉到错误时弹出，或者如果我需要一种不同的方法来完成它

当你们想显示snackbar警报时，只需在下面一行

setStatusBase({ msg: "Success", key: Math.random() });

您可以在简单的snackbar上检查，只需触发真/假状态即可打开snackbar。