Ошибка функции контекста Snackbar в приложении React Context, Redux, Redux-Form - PullRequest
Новая
       9

Ошибка функции контекста Snackbar в приложении React Context, Redux, Redux-Form

0 голосов
/ 20 июня 2019

Когда я отправляю функцию обновления провайдера закусочной (сообщение «Успешная отправка») для выполнения в создателе избыточного действия, после успешного вызова POST axios я получаю сообщение об ошибке, в котором говорится, что мой вызов функции снэк-бара не является функцией.

Я завернул свою форму Redux с контекстным получателем , который передает контекстную информацию. В методе класса для отправки я хочу передать функцию контекста, которая обновит поставщика снэк-баров, чтобы отобразить снэк-бар с сообщением.

PolicyCreate Wrapper (показаны функции onSubmit и render), который оборачивает мою повторно используемую PolicyForm: 

  onSubmit = (formValues, snackProps) => {
    this.props.createPolicy(formValues, snackProps);
  };

render() {
    return (
      <SharedSnackbarConsumer>
        {(snackProps) => {
          return (
            <div>
              <h3>Create Policy</h3>
              <PolicyForm {...this.props} onSubmit={this.onSubmit} />
            </div>
          );
        }}
      </SharedSnackbarConsumer>
    );
  }

PolicyForm компонент многократного использования 

  // passing down from parent component onSubmit
  onSubmit = (formValues, snackProps) => {
    this.props.onSubmit(formValues, snackProps);
  };

  render() {
    const { handleSubmit, pristine, reset, submitting } = this.props;
    return (
      <SharedSnackbarConsumer>
        {(snackProps) => {
          return (
            <Paper style={{ padding: '2rem' }}>
              <form
                onSubmit={handleSubmit(this.onSubmit, snackProps)}
              >

Создатель Действия для Творения 


export const createPolicy = (formValues, snackProps) => async (dispatch) => {
  try {
    const url = `${ROOT_URL}/${POLICY_ENDPT}`;
    const response = await axios.post(url, { ...formValues });

    dispatch({
      type: CREATE_POLICY,
      payload: response.data,
    });

    snackProps.openSnackbar('You successfully created a Policy!');
  } catch (error) {
    console.warn(error);
    // snackProps.openSnackbar('An error as occured');
  } finally {
    history.push('/app/core/policy');
  }
};

По сути, я должен увидеть контекст, создающий уведомление в виде закусочной после того, как создатель моего действия успешно отправил редуктор. Когда я отлаживаю наSubmit в 

onSubmit = (formValues, snackProps) => {
    this.props.onSubmit(formValues, snackProps);
  };

SnackProps дает:

ƒ () {Вернуться! Окно. REDUX_DEVTOOLS_EXTENSION_LOCKED && a.dispatch.apply (а, аргументы)}

Итак, внутри создателей действий выгода возвращается:

TypeError: snackProps.openSnackbar не является функцией

Это имеет смысл, так как snackProps возвращает интересную информацию об окне и избыточном devtools. Я не могу понять, как решить, и я ценю всю вашу помощь

...