Показывать пользовательский интерфейс SnackBar Material при появлении ошибки в Mutation

Я использую Snack bar со страницы Материал-пользовательский интерфейс (первый пример — Customized 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);

В примере закусочная отображается при нажатии на кнопку "ОТКРЫТЬ УСПЕХ ЗАКУСОЧНУЮ"

Я хотел бы показать закусочную с ошибкой, когда Мутация от Аполлона в моей форме дает ошибку.

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

Проблема в том, что я не знаю, как вызвать отображение SnackBar в функции при ошибке. Как изменить состояние Snack Bar? Я пробовал решение от здесь, но получаю сообщение об ошибке

openSnackbarFn is not a function

Заранее спасибо.

также, но я хочу показать сообщение о появлении ошибки

— 10.02.2019 13:03

создайте функцию, а затем вызовите ее как из onError, так и из onComplete

— 10.02.2019 13:03

но как должна выглядеть эта функция?

— 10.02.2019 13:04

нормальная функция javascript и вызывайте ее так же, как вы вызываете функции для прослушивателей событий из ваших реагирующих компонентов

— 10.02.2019 13:05

но как эта функция скажет Snackbar показать, как она может изменить состояние в Snackbar?

— 10.02.2019 13:07

пример пожалуйста..

— 10.02.2019 13:07

Давайте продолжить обсуждение в чате.

— 10.02.2019 13:40

reactjs material-ui apollo mutation snackbar

10.02.2019 12:56

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

7 530

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.info(data); }}
        >
          {mutation => (
            //here is the form
          )}
        </Mutation>
        <Snackbar
          open = {open}
          onClose = {this.handleClose}
          // other Snackbar props
        >
          // Snackbar contents
        </Snackbar>
      </React.Fragment>
    )
  }
}

Функциональный компонент с хуками

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.info(data); }}
      >
        {mutation => (
          //here is the form
        )}
      </Mutation>
      <Snackbar
        open = {open}
        onClose = {() => setOpen(false)}
        // other Snackbar props
      >
        // Snackbar contents       
      </Snackbar>
    </React.Fragment>
  )
}

stackoverflow.com/questions/60508814/…

— 03.03.2020 15:01

10.02.2019 13:48