在使用 syncErrors 之前等待 redux-form 完成答案

【问题标题】：Wait for redux-form to finish before using syncErrors在使用 syncErrors 之前等待 redux-form 完成
【发布时间】：2019-01-30 18:50:27
【问题描述】：

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

我注意到，为了使用syncErrors状态，检查验证错误，我需要先检查实际的redux-form是否已经完成渲染，否则React会抱怨找不到syncErrors的未定义 - 暗示 this.props.accountForm、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>
  )
}

这是有效的代码：

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

【问题讨论】：

标签： reactjs redux redux-form

【解决方案1】：

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

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

const { invalid, submitting } = this.props;

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

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

【讨论】：