在使用syncErrors之前,请等待redux表单完成

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

我注意到为了使用 syncErrors 已完成渲染,否则React将抱怨找不到 同步错误 未定义的-意味着 this.props.accountForm ,的 ,尚不可用。

这是预期的行为吗?

这是破坏的代码:

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

那么combineReducers文件如下所示:

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

export default combineReducers({
  form: reduxForm
});