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

Question

我正在使用 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
});

Answer 1

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

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

const { invalid, submitting } = this.props;

然后在提交按钮中我做这样的事情：

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

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

Wait for redux-form to finish before using syncErrors

reactjs

redux

redux-form