Материал-пользовательский интерфейс Snackbar с редуксом сбой на onClose

Question

Хорошо, я схожу с ума. Я пытаюсь сделать как компонент общего сообщения с компонентом snackbar из Material-UI, и я хочу, чтобы он контролировался redux. Идея состоит в том, что когда я делаю асинхронный вызов API, состояние в redux установит для свойства show значение true, и появится сообщение. Это нормально, и это хорошо. Проблема в том, что когда я нажимаю на кнопку закрытия, она должна отправить функцию закрытия для редукции, и состояние будет установлено в false. Но в консоли появляется сообщение об ошибке:

Неопределенное нарушение инварианта: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получил: не определено. Вы, вероятно, забыли экспортировать ваш компонент из файла он определен в, или вы могли смешать импорт по умолчанию и с именами.

Проверьте метод рендеринга SnackbarContentRaw.

generalMessage.jsx

import { hideMessage } from '../../../actions/action_messages';

const _GeneralMessage = (props) => {   return (
    <Snackbar
      ...
      open={props.show}
      onClose={props.closeMessage}
    >
      <SnackbarContentWrapper
        onClose={props.closeMessage}
        ...
      />
    </Snackbar>   ) }

const mapStateToProps = (state) => ({
    show: state.mensajes.show,
    tipo: state.mensajes.tipo,
    mensaje: state.mensajes.mensaje
});

const mapDispatchToProps = (dispatch) => {
    return {
        closeMessage: () => dispatch( hideMessage() )
    }
}

export const GeneralMessage = connect(mapStateToProps, mapDispatchToProps)(_GeneralMessage);

SnackbarContentWrapper.jsx

const SnackbarContentRaw = (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}
    />
  );
}

export default withStyles(styles)(SnackbarContentRaw);

action_messages.js

import { HIDE_MESSAGE } from './types/messages';

export const hideMessage = () => {
  return { type: HIDE_MESSAGE }
}

Я экспортирую / импортирую что-то не так или это компонент material-ui? Дайте мне знать, если кому-то понадобится другой файл, и я могу разместить его здесь.

Спасибо

Answer 1

Попробуйте предоставить контент для SnackBar в action реквизите следующим образом:

action={[
            <Button key="undo" color="secondary" size="small" onClick={this.handleClose}>
              UNDO
            </Button>,
            <IconButton
              key="close"
              aria-label="Close"
              color="inherit"
              className={classes.close}
              onClick={this.handleClose}
            >
              <CloseIcon />
            </IconButton>,
          ]}
        />

https://codesandbox.io/s/7jkzwn39qx

Answer 2

Ладно, после дня копания в интернете ответов выясняется, что это была проблема с редуктором.Я возвращал разные ключи состояния для разных типов.Мой плохой.

Это то, что у меня было:

import { SHOW_MESSAGE, HIDE_MESSAGE } from '../actions/types/messages';

const initialState = {
  show: false,
  tipo: null,
  message: '',
}

export const mensajes = (state = initialState, action) => {
  switch(action.type) {
    case SHOW_MESSAGE:
      return { show: true, tipo: action.tipo, mensaje: action.mensaje }
    case HIDE_MESSAGE:
      return initialState
    default:
      return state
  }
}

Так что мне говорили, что он получает неопределенное, когда я пытался получить ключ mensaje, и он имел только message.

Answer 3

Попробуйте удалить onClose из SnackbarContentWrapper , полагаю, достаточно предоставить его в Snackbar.ИДК, если это поможет решить вашу проблему, но в любом случае SnackbarContent не нуждается в onClose ().

Неизмененное инвариантное нарушение: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс /функция (для составных компонентов), но полученная: undefined часто появляется при условном рендеринге, когда один из дочерних элементов становится нулевым или неопределенным.Проверьте SnackbarContent, возможно, внутри него есть похожая проблема.