Дождитесь завершения редукс-формы, прежде чем использовать syncErrors - PullRequest
Новая
       4

Дождитесь завершения редукс-формы, прежде чем использовать syncErrors

0 голосов
/ 30 января 2019

Я использую redux-form для обработки данных формы внутри приставки.

Я заметил, что для использования состояния syncErrors для проверки ошибок валидации мне нужно сначала проверить, что фактический redux-form закончил рендеринг, в противном случае React будет жаловаться, что не может найти syncErrors из неопределенного - это означает, что this.props.accountForm, redux-form, еще не доступен.

Это ожидаемое поведение?

Это код, который ломается: 

render() {
  return (
    <SignUpInForm>
        <div>
          <Field
            name="name"
            component={renderTextField}
            label="Full Name*"
          />
        </div>
        <div>
          <Field
            name="email"
            component={renderTextField}
            label="Email Address*"
          />
        </div>
      <div>
        <Button
          disabled={!!this.props.accountForm.syncErrors}
          onClick={this.signUp}
        >
          Save
        </Button>
      </div>
      ..
    </SignUpInForm>
  )
}

И это код, который работает: 

render() {
  return (
    !!this.props.accountForm && (
      <SignUpInForm>
          <div>
            <Field
              name="name"
              component={renderTextField}
              label="Full Name*"
            />
          </div>
          <div>
            <Field
              name="email"
              component={renderTextField}
              label="Email Address*"
            />
          </div>
        <div>
          <Button
            disabled={!!this.props.accountForm.syncErrors}
            onClick={this.signUp}
          >
            Save
          </Button>
        </div>
        ..
      </SignUpInForm>
    )
  )
}

Мне это кажется немного уродливым!

Примечание - вот как я подключаю его к редуктору: 

const mapStateToProps = state => {
  return {
    accountForm: state.form.accountForm
  };
};

Account = connect(
  mapStateToProps,
  null
)(Account);

export default withRouter(
  reduxForm({
    form: "accountForm",
    validate
  })(Account)
);

Тогда файл combReducers выглядит так: 

import { combineReducers } from "redux";
import { reducer as reduxForm } from "redux-form";

export default combineReducers({
  form: reduxForm
});

1 Ответ

0 голосов
/ 31 января 2019

Все это время я проверял redux-form неправильно!

Я решил это с помощью следующих redux-form процедур для проверки ошибок: 

const { invalid, submitting } = this.props;

Затем в кнопке отправки я делаю что-то вроде этого: 

          <Button
            disabled={invalid || submitting }
            onClick={this.signUp}
          >
...