更新存储后重新呈现React组件后,不会触发redux形式的字段组件

时间:2020-05-05 18:41:25

标签: reactjs redux react-redux redux-form

我将Redux-Form和React-Redux用于我的注册表单,并且在客户端进行了一些验证,但是使用电子邮件的情况只能由服务器确定。因此,我正在分派动作SIGN_UP,该动作会将数据发布到服务器并等待响应。响应可以是用户个人资料等,也可以是错误,例如400(已接收电子邮件)。现在,我想在表单的电子邮件输入下显示此错误,但是传递给<Field component={} />的方法没有第二次触发,因此无法将错误显示给用户。但是,这是第一次执行传递给Field的方法。

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);

有解决方法吗?

0 个答案:

没有答案