Question

我正在使用redux-form处理redux中的表单数据。

我注意到，为了使用syncErrors状态检查验证错误，我需要首先检查实际的redux-form是否已完成渲染，否则React会抱怨找不到它syncErrors的不确定 - 这意味着this.props.accountForm，{在{1}}，是尚未公布。

这是预期的行为吗？

这是破裂的代码：

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

对我来说，这看起来很难看！

注意-这是我将其连接到reducer的方式：

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

然后CombineReducers文件如下所示：

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

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

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

Answer 1

一直以来，我都在验证redux-form错误！

我通过使用以下redux-form道具检查错误来解决此问题：

const { invalid, submitting } = this.props;

然后在“提交”按钮中执行以下操作：

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

使用syncErrors前等待终极版形式到结束

1 个答案: