Компонент поля в redux-форме не запускается после повторного рендеринга React Component после обновления хранилища - PullRequest
Новая
       27

Компонент поля в redux-форме не запускается после повторного рендеринга React Component после обновления хранилища

0 голосов
/ 05 мая 2020

Я использую Redux-Form и React-Redux для своей регистрационной формы, и я провожу некоторую проверку на стороне клиента, но случай, когда используется электронная почта, может быть определен только сервером. Итак, я отправляю действие SIGN_UP, которое отправляет данные на сервер и ожидает ответа. Ответом может быть профиль пользователя et c. или ошибка, например 400 - емейл взят. Теперь я хочу показать эту ошибку под вводом электронной почты в форме, но метод, переданный в <Field component={} />, не запускается во второй раз, поэтому я не могу отобразить ошибку пользователю. Но впервые выполняется метод, переданный в Поле. 

class RegisterForm extends Component {
  onSubmit = (formValues) => {
    // Dispatching action with redux action creator
    this.props.onSubmit(formValues);
  };

  renderServerError = () => {
    // For errors from server
    return <div className="invalid-feedback">{this.props.auth.error}</div>;
  };

  renderError(touched, error) {
    // For client-side validation
    if (touched && error) {
      return <div className="invalid-feedback">{error}</div>;
    }
  }

  renderField = ({ input, label, type, meta: { touched, error } }) => {
    // Does not Run after updating store with new state with response from server
    // But, runs for the first time after rendering component
    return (
      <div className="form-group">
        <label>{label}</label>
        <div>
          <input
            {...input}
            placeholder={label}
            type={type}
            className={className}
          />
          {/* Here I want to show either client sie errors or server errors */}
          {touched && error
            ? this.renderError(touched, error)
            : this.renderServerError()}
        </div>
      </div>
    );
  };

  render() {
    // Runs after updating store with new state with response from server
    return (
      <form onSubmit={this.props.handleSubmit(this.onSubmit)}>
        <Field
          type="email"
          name="email"
          component={this.renderField}
          label="Email"
        />
        {/* Removed fields for readability */}
      </form>
    );
  }
}

const validate = ({ email, username, password1, password2 }) => {
  // Client side validation ...
};

const mapStateToProps = (state) => {
  return {
    auth: state.auth,
  };
};

RegisterForm = connect(mapStateToProps)(RegisterForm);

export default reduxForm({
  form: 'registerForm',
  validate,
})(RegisterForm);

Есть ли обходной путь?

...