Как синхронизировать c значение реквизита для проверки - redux-form - PullRequest
Новая
       101

Как синхронизировать c значение реквизита для проверки - redux-form

0 голосов
/ 07 августа 2020

У меня есть вызов компонента EditPasswordReset, который отображает форму: FormEditPasswordReset. Форма отображает функцию проверки. Я обновляю значение реквизита EditPasswordReset, вызывая функцию componentDidMount() (которая вызывает действие EditPasswordResetValidUrl() для обновления значения в хранилище redux), после чего значение реквизита также будет обновлено в FormEditPasswordReset. Однако новое обновленное значение props не было сопоставлено для проверки, и вместо этого оно по-прежнему имеет старое значение. Итак, мой вопрос: есть ли способ или функция для синхронизации c обновленного значения props для проверки? Вот мои файлы: 

class EditPasswordReset extends React.Component {
  constructor(props) {
    super(props);

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleToBackPage = this.handleToBackPage.bind(this);
  }

  componentDidMount() {
    $(".render-field").bootstrapMaterialDesign({});
    if (localStorage.getItem("user") !== null) {
      localStorage.removeItem("user");
      window.location.href = location.href;
    }

    const path = location.pathname;
    const params = location.search.substring(7);
    this.props.EditPasswordResetValidUrl(path, params);
    TogglePasswordForm();
  }

  handleSubmit(values) {
    const path = location.pathname;
    const params = location.search.substring(7);
    this.props.EditPasswordResetAction(values, path, params);
  }

  handleToBackPage = () => {
    this.props.history.push("/profile");
  };

  render() {
    const i18n = this.props.i18n;
    const user = this.props.user;
    return (
      <div className="wrapper-area">
        <Header />
        <FormEditPasswordReset
          onSubmit={this.handleSubmit}
          handleToBackPage={this.handleToBackPage}
          handleChange={this.handleChange}
          i18n={i18n}
          user={user}
          state={this.state}
        />
        <Footer />
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    i18n: state.i18n.profile,
    user: state.user,
  };
};

const mapDispatchToProps = {
  EditPasswordResetAction,
  EditPasswordResetValidUrl,
};

export default connect(mapStateToProps, mapDispatchToProps)(EditPasswordReset);

форма: 

let FormEditPasswordReset = props => {
  const { handleSubmit, i18n, handleChange } = props;
  return (
    <div>
      <div className="container">
        <div className="row justify-content-md-center">
          <div className="col-md-4">
            <form onSubmit={handleSubmit}>
              <div className="form-group">
                <Field
                  name="password"
                  component={renderField}
                  label={i18n.password}
                  type="password"
                  required="required"
                  onChange={handleChange}
                  oncopy="return false"
                  onpaste="return false"
                  oncontextmenu="return false"
                />
              </div>
              <div className="form-group">
                <Field
                  name="password_confirmation"
                  component={renderField}
                  label={i18n.password_confirmation}
                  type="password"
                  required="required"
                  oncopy="return false"
                  onpaste="return false"
                  oncontextmenu="return false"
                />
              </div>
              <div className="form-group row">
                <div className="col-md-6 password-reset-submit">
                  <button type="submit" className="btn btn-primary btn-block">
                    {i18n.submit}
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default reduxForm({
  form: "formEditPasswordReset",
  validate,
  asyncValidate,
  asyncBlurFields: ["password", "password_confirmation"],
})(FormEditPasswordReset);

файл проверки: 

const validate = (values, props) => {
  const errors = {};
  const i18n = props.i18n; // THIS IS WHERE I EXPECTED THE VALUE TO BE SYNCED
  ... do sth
...