Reactjs SnackBar仅在多次分派操作时第一次显示_Reactjs_Typescript_Redux_Material Ui

Reactjs SnackBar仅在多次分派操作时第一次显示

reactjs typescript redux material-ui

Reactjs SnackBar仅在多次分派操作时第一次显示,reactjs,typescript,redux,material-ui,Reactjs,Typescript,Redux,Material Ui,我有一个snackBar，它根据已调度的操作显示错误或成功消息。为了测试它并多次提交表单，我试图放置错误的用户凭据，但是snackBar只在第一次出现 SnackBar.tsx： import { green } from "@material-ui/core/colors"; import IconButton from "@material-ui/core/IconButton"; import Snackbar from "@material-ui/core/Snackbar"; impo

我有一个snackBar，它根据已调度的操作显示错误或成功消息。为了测试它并多次提交表单，我试图放置错误的用户凭据，但是snackBar只在第一次出现

SnackBar.tsx：

import { 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 { makeStyles, Theme } from "@material-ui/core/styles";
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
import CloseIcon from "@material-ui/icons/Close";
import ErrorIcon from "@material-ui/icons/Error";
import clsx from "clsx";
import React from "react";

const variantIcon = {
  error: ErrorIcon,
  success: CheckCircleIcon,
};

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

export interface IProps {
  className?: string;
  message?: string;
  onClose?: () => void;
  variant: keyof typeof variantIcon;
}

function MySnackbarContentWrapper(props: IProps) {
  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}
    />
  );
}

interface IProps1 {
  open: boolean;
  handleClose: () => void;
  variant: any;
  message: string;
}
export default function CustomizedSnackbars(props: IProps1) {
  const { open, handleClose, variant, message } = props;
  return (
    <div>
      <Snackbar
        anchorOrigin={{
          horizontal: "left",
          vertical: "bottom",
        }}
        open={open}
        autoHideDuration={6000}
        onClose={handleClose}
      >
        <MySnackbarContentWrapper
          onClose={handleClose}
          variant={variant}
          message={message}
        />
      </Snackbar>
    </div>
  );
}

从“@material ui/core/colors”导入{green}”；
从“@material ui/core/IconButton”导入图标按钮；
从“@material ui/core/Snackbar”导入Snackbar；
从“@material ui/core/SnackbarContent”导入SnackbarContent；
从“@materialui/core/styles”导入{makeStyles，Theme}”；
从“@material ui/icons/CheckCircle”导入CheckCircleIcon；
从“@material ui/icons/Close”导入CloseIcon；
从“@material ui/icons/Error”导入ErrorIcon；
从“clsx”导入clsx；
从“React”导入React；
常数方差={
错误：错误图标，
成功：CheckCircleIcon，
};
const useStyles1=makeStyles（（主题：主题）=>({
错误：{
背景色：theme.palete.error.dark
},
图标：{
尺寸：20
},
iconVariant：{
边缘光：主题。间距（1），
不透明度：0.9，
},
信息：{
对齐项目：“中心”，
显示：“flex”，
},
成功：{
背景颜色：绿色[600]
},
}));
导出接口IProps{
类名？：字符串；
消息？：字符串；
onClose？：（）=>无效；
变量：变量类型的键；
}
函数mysnakbarContentWrapper（props:IProps）{
const classes=useStyles1（）；
const{className，message，onClose，variant，…other}=props；
常量图标=变量图标[变量]；
返回(
);
}
接口IProps1{
开放：布尔；
handleClose:（）=>无效；
变体：任何；
消息：字符串；
}
导出默认功能自定义SnackBars（道具：IProps1）{
const{open，handleClose，variant，message}=props；
返回(
);
}

SignInContainer.tsx：

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import SnackBar from "../../components/common/SnackBar";
import SignInForm from "./SignInForm";

interface IProps {
  message: string;
  variant: string;
}
const SingInContainer = (props: IProps) => {
  const { message, variant } = props;
  const [open, setSnackBarState] = useState(!!variant);

  useEffect(() => {
    setSnackBarState(!!variant);
  }, [variant]);

  const handleClose = () => {
    setSnackBarState(false);
  };

  return (
    <div>
      <SnackBar
        open={open}
        handleClose={() => {
          handleClose();
        }}
        variant={variant}
        message={message}
      />
      <SignInForm />
    </div>
  );
};

const mapStateToProps = (state: any) => {
  const { variant, message } = state.snackBar;

  return {
    message,
    variant,
  };
};

export default connect(mapStateToProps)(SingInContainer);

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { resetAlert } from "../../actions/ui/snackBarActions";
import SnackBar from "../../components/common/SnackBar";
import SignUpForm from "./SignUpForm";

interface IProps {
  message: string;
  variant: string;
  resetAlert: () => void;
}
const SingUpContainer = (props: IProps) => {
  const { message, variant } = props;
  const [open, setSnackBarState] = useState(!!variant);

  useEffect(() => {
    setSnackBarState(!!variant);

    return function cleanUp() {
      resetAlert();
    };
  }, [variant]);

  const handleClose = () => {
    setSnackBarState(false);
  };

  return (
    <div>
      <SnackBar
        open={open}
        handleClose={() => {
          handleClose();
        }}
        variant={variant}
        message={message}
      />
      <SignUpForm />
    </div>
  );
};

const mapStateToProps = (state: any) => {
  const { variant, message } = state.snackBar;

  return {
    message,
    variant,
  };
};

export default connect(mapStateToProps, { resetAlert })(SingUpContainer);

import React，{useffect，useState}来自“React”；
从“react redux”导入{connect}；
从“../../components/common/SnackBar”导入SnackBar；
从“/signinfo”导入signinfo；
接口IProps{
消息：字符串；
变体：字符串；
}
const SingInContainer=（道具：IProps）=>{
const{message，variant}=props；
const[open，setsnakbarstate]=使用状态（！！变量）；
useffect（（）=>{
设置nackbarstate（！！变体）；
}，[变体]；
常量handleClose=（）=>{
设置nackbarstate（假）；
};
返回(
{
handleClose（）；
}}
variant={variant}
message={message}
/>
);
};
常量mapStateToProps=（状态：任意）=>{
const{variant，message}=state.snackBar；
返回{
消息
变体，
};
};
导出默认连接（MapStateTops）（SingInContainer）；

此代码有什么问题？如何在每次显示消息时都显示snackbar？

根据官方文档，我曾重置

变体以更新snackbar消息。
SignInContainer.tsx：
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import SnackBar from "../../components/common/SnackBar";
import SignInForm from "./SignInForm";

interface IProps {
  message: string;
  variant: string;
}
const SingInContainer = (props: IProps) => {
  const { message, variant } = props;
  const [open, setSnackBarState] = useState(!!variant);

  useEffect(() => {
    setSnackBarState(!!variant);
  }, [variant]);

  const handleClose = () => {
    setSnackBarState(false);
  };

  return (
    <div>
      <SnackBar
        open={open}
        handleClose={() => {
          handleClose();
        }}
        variant={variant}
        message={message}
      />
      <SignInForm />
    </div>
  );
};

const mapStateToProps = (state: any) => {
  const { variant, message } = state.snackBar;

  return {
    message,
    variant,
  };
};

export default connect(mapStateToProps)(SingInContainer);

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { resetAlert } from "../../actions/ui/snackBarActions";
import SnackBar from "../../components/common/SnackBar";
import SignUpForm from "./SignUpForm";

interface IProps {
  message: string;
  variant: string;
  resetAlert: () => void;
}
const SingUpContainer = (props: IProps) => {
  const { message, variant } = props;
  const [open, setSnackBarState] = useState(!!variant);

  useEffect(() => {
    setSnackBarState(!!variant);

    return function cleanUp() {
      resetAlert();
    };
  }, [variant]);

  const handleClose = () => {
    setSnackBarState(false);
  };

  return (
    <div>
      <SnackBar
        open={open}
        handleClose={() => {
          handleClose();
        }}
        variant={variant}
        message={message}
      />
      <SignUpForm />
    </div>
  );
};

const mapStateToProps = (state: any) => {
  const { variant, message } = state.snackBar;

  return {
    message,
    variant,
  };
};

export default connect(mapStateToProps, { resetAlert })(SingUpContainer);


import React，{useffect，useState}来自“React”；
从“react redux”导入{connect}；
从“../../actions/ui/snackBarActions”导入{resetAlert}”；
从“../../components/common/SnackBar”导入SnackBar；
从“/SignUpForm”导入注册表单；
接口IProps{
消息：字符串；
变体：字符串；
重置警报：（）=>无效；
}
const SingUpContainer=（道具：IProps）=>{
const{message，variant}=props；
const[open，setsnakbarstate]=使用状态（！！变量）；
useffect（（）=>{
设置nackbarstate（！！变体）；
返回函数cleanUp（）{
重置警报（）；
};
}，[变体]；
常量handleClose=（）=>{
设置nackbarstate（假）；
};
返回(
{
handleClose（）；
}}
variant={variant}
message={message}
/>
);
};
常量mapStateToProps=（状态：任意）=>{
const{variant，message}=state.snackBar；
返回{
消息
变体，
};
};
导出默认连接（MapStateTops，{resetAlert}）（SingUpContainer）；
您的操作被分派到哪里？您依靠useffect
打开SnackBar-只有在variant
更改时才会再次调用它。由于您显示了一条错误消息，我想大部分时间变量
都是相同的（因此在该组件的生命周期内不再调用useffect
）