在 Mutation 中出现错误时显示 SnackBar Material UI

Posted 2023-02-23

【中文标题】在 Mutation 中出现错误时显示 SnackBar Material UI

【英文标题】：Show SnackBar Material UI when appear erron in Mutation

【发布时间】：2019-07-04 02:16:29

【问题描述】：

我使用来自Materia-UI 页面的 Snack bar（第一个示例 - 自定义 SnackBars）

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

const styles1 = theme => (
  success: 
    backgroundColor: green[600],
  ,
  error: 
    backgroundColor: theme.palette.error.dark,
  ,
  info: 
    backgroundColor: theme.palette.primary.dark,
  ,
  warning: 
    backgroundColor: amber[700],
  ,
  icon: 
    fontSize: 20,
  ,
  iconVariant: 
    opacity: 0.9,
    marginRight: theme.spacing.unit,
  ,
  message: 
    display: 'flex',
    alignItems: 'center',
  ,
);

function MySnackbarContent(props) 
  const  classes, className, message, onClose, variant, ...other  = props;
  const Icon = variantIcon[variant];

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


MySnackbarContent.propTypes = 
  classes: PropTypes.object.isRequired,
  className: PropTypes.string,
  message: PropTypes.node,
  onClose: PropTypes.func,
  variant: PropTypes.oneOf(['success', 'warning', 'error', 'info']).isRequired,
;

const MySnackbarContentWrapper = withStyles(styles1)(MySnackbarContent);

const styles2 = theme => (
  margin: 
    margin: theme.spacing.unit,
  ,
);

class CustomizedSnackbar extends React.Component 
  state = 
    open: false,
  ;

  handleClick = () => 
    this.setState( open: true );
  ;

  handleClose = (event, reason) => 
    if (reason === 'clickaway') 
      return;
    
    this.setState( open: false );
  ;

  render() 
    return (
      <div>
        <Snackbar
          anchorOrigin=
            vertical: 'bottom',
            horizontal: 'left',
          
          open=this.state.open
          autoHideDuration=2000
          onClose=this.handleClose
        >
          <MySnackbarContentWrapper
            onClose=this.handleClose
            variant="error"
            message="This is an error message!"
          />
        </Snackbar>
      </div>
    );
  


export default withStyles(styles2)(CustomizedSnackbar);

在示例中，当点击按钮“OPEN SUCCESS SNACKBAR”时会显示小吃店

当我的表单上来自 Apollo 的 Mutation 出现错误时，我想显示错误小吃吧。

render()
 return(
  <div>
   <Mutation
    mutation=this.mutationQuery
    onError=() =>
     //here show Snack Bar
    
    onCompleted=data =>  console.log(data); 
   >
  mutation => (
//here is the form
)
)

问题是我不知道如何触发以在 on Error 函数中显示 SnackBar。如何更改小吃店的状态？我正在尝试来自here 的解决方案，但我收到一个错误

openSnackbarFn 不是函数

提前致谢。

【问题讨论】：

也是，但我想显示出现错误的消息

创建一个函数，然后从 onError 和 onComplete 调用它

但是这个函数应该是什么样子？

普通的 javascript 函数并调用它，就像你从你的反应组件调用事件监听器上的函数一样

但是这个函数将如何告诉 Snackbar 显示，它如何改变 Snackbar 中的状态？

【参考方案1】：

从根本上说，您希望您的 Snackbar 成为您的 Mutation 的兄弟，并让它们的共同父级（即您的组件）处理 Snackbar 的打开/关闭状态。

类式组件

class FormWithMutationAndSnackbar extends React.Component 
  state = 
    open: false
  

  handleOpen = () => this.setState( open: true )

  handleClose = () => this.setState( open: false )

  render() 
    const  open  = this.state
    return(
      <React.Fragment>
        <Mutation
          mutation=this.mutationQuery
          onError=(err) => 
            // use err to set Snackbar contents for example
            this.handleOpen()
          
          onCompleted=data =>  console.log(data); 
        >
          mutation => (
            //here is the form
          )
        </Mutation>
        <Snackbar
          open=open
          onClose=this.handleClose
          // other Snackbar props
        >
          // Snackbar contents
        </Snackbar>
      </React.Fragment>
    )
  

带有 Hooks 的功能组件

const FormWithMutationAndSnackbar = () => 
  const [open, setOpen] = useState(false)

  return(
    <React.Fragment>
      <Mutation
        mutation=this.mutationQuery
        onError=(err) => 
          // use err to set Snackbar contents for example
          setOpen(true)
        
        onCompleted=data =>  console.log(data); 
      >
        mutation => (
          //here is the form
        )
      </Mutation>
      <Snackbar
        open=open
        onClose=() => setOpen(false)
        // other Snackbar props
      >
        // Snackbar contents       
      </Snackbar>
    </React.Fragment>
  )

【讨论】：

***.com/questions/60508814/…