如何使用Redux-Form选择器将Syncerrors脱离状态

Question

所以我有一个带有验证函数的redux-form组件，该函数返回字段...

const validate = values => {
  const errors = {
    orderHeader: {}
  };
  const orderHeader = values.orderHeader || {};
  if (!orderHeader.orderID) {
    errors.orderHeader.orderID = "Working";
  }
  if (!orderHeader.salesRepID) {
    errors.orderHeader.salesRepID = "Working as well";
  }
  return errors;
}

我正在尝试弄清楚如何使用选择器将所有SyncError值返回到一个错误清单组件，该组件将列出所有当前错误。

我的选择器看起来像这样

const selector = formValueSelector('mainForm')
MainForm = connect(
  state =>
  ({
    syncErrors: getFormSyncErrors('mainForm')(state),
    initialValues: state.account.data,
  }
),
  { load: loadAccount }, // bind account loading action creator
)(MainForm);

记录以下返回未定义...

  render() {
    const { error, handleSubmit, load, pristine, reset, submitting, values, syncErrors } = this.props;
    console.log(syncErrors)

我觉得我正在犯一个语法错误，因为我希望这将返回状态的Syncerrors部分作为对象...它在form.mainform.mainform.syncerrors中正确出现在状态中。

我完全误解了这个吗？什么对我有帮助？

这是整体中的组成部分...

import React from "react";
import ReactDOM from "react-dom";
import { Row, Col, Container, Form } from 'reactstrap';
import classnames from 'classnames'
import store from "../../../store";
import { connect } from 'react-redux';
import axios from 'axios'
import RemoteSubmitButton from '../../ReduxForms/RemoteSubmitButton'
import { Field, reduxForm, formValueSelector, getFormSyncErrors } from 'redux-form';
import { load as loadAccount } from '../../../reducers/account';
import renderInput from '../../ReduxForms/FormComponents';
import submit from '../../ReduxForms/submit'
//import validate from '../../ReduxForms/validate'
const validate = values => {
  const errors = {
    orderHeader: {}
  };
  const orderHeader = values.orderHeader || {};
  if (!orderHeader.orderID) {
    errors.orderHeader.orderID = "Working";
  }
  if (!orderHeader.salesRepID) {
    errors.orderHeader.salesRepID = "Working as well";
  }
  return errors;
}
const remotejson= "SalesObject.json";
class MainForm extends React.Component {
  constructor(props) {
  super(props)
  this.state = {
    data: null,
    }
  }
  componentDidMount () {
  axios.get('/data/' + remotejson)
    .then((response) => {
    //    console.log(response.data);
       this.setState({data: response.data})
     })
    .catch((error)=>{
       //console.log(error);
    });
  }
  render() {
    const { error, handleSubmit, load, pristine, reset, submitting, values, syncErrors } = this.props;
    console.log({syncErrors})
    return (
        <div style={{ padding: 15 }}>
          <Form onSubmit={handleSubmit}>
            <button type="button" onClick={() => load(this.state.data)}>Load Order</button>
            <Container>
              <Row>
                <Col sm={4}>
                  <Field label="order ID" id="orderID" name="orderHeader.orderID" type="text" component={renderInput} />
                </Col>
                <Col sm={4}>
                  <Field id="salesRepID" name="orderHeader.salesRepID" type="text" component={renderInput} />
                </Col>
              </Row>
            </Container>
            {syncErrors && <strong>{syncErrors}</strong>}
            {error && <strong>{error}</strong>}
          </Form>
          <RemoteSubmitButton />
        </div>
    )
  }
}
    // Decorate with reduxForm(). It will read the initialValues prop provided by connect()
let MainReduxForm = MainForm = reduxForm({
  form: 'mainForm', // a unique identifier for this form
  enableReinitialize: true, // Important after the data load process is moved to redux saga. This should allow for a common sales object to be built
  validate,
  onSubmit: submit // submit function must be passed to onSubmit
})(MainForm);
// You have to connect() to any reducers that you wish to connect to yourself
const selector = formValueSelector('mainForm')
MainReduxForm = connect(
  state =>
  ({
    syncErrors: getFormSyncErrors('mainForm')(state),
    initialValues: state.account.data
  }),
  { load: loadAccount }, // bind account loading action creator
)(MainReduxForm);
export default MainReduxForm; 

Answer 1

syncErrors是一个关键字，由redux-form内部使用，并且无法作为对表单组件的道具可用。您需要将Syncerror传递给具有不同名称的组件

class MainForm extends React.Component {
  constructor(props) {
  super(props)
  this.state = {
    data: null,
    }
  }
  componentDidMount () {
  axios.get('/data/' + remotejson)
    .then((response) => {
    //    console.log(response.data);
       this.setState({data: response.data})
     })
    .catch((error)=>{
       //console.log(error);
    });
  }
  render() {
    const { error, handleSubmit, load, pristine, reset, submitting, values, synchronousError } = this.props;
    console.log({syncErrors})
    return (
        <div style={{ padding: 15 }}>
          <Form onSubmit={handleSubmit}>
            <button type="button" onClick={() => load(this.state.data)}>Load Order</button>
            <Container>
              <Row>
                <Col sm={4}>
                  <Field label="order ID" id="orderID" name="orderHeader.orderID" type="text" component={renderInput} />
                </Col>
                <Col sm={4}>
                  <Field id="salesRepID" name="orderHeader.salesRepID" type="text" component={renderInput} />
                </Col>
              </Row>
            </Container>
            {synchronousError && <strong>{synchronousError}</strong>}
            {error && <strong>{error}</strong>}
          </Form>
          <RemoteSubmitButton />
        </div>
    )
  }
}
    // Decorate with reduxForm(). It will read the initialValues prop provided by connect()
let MainReduxForm = reduxForm({
  form: 'mainForm', // a unique identifier for this form
  enableReinitialize: true, // Important after the data load process is moved to redux saga. This should allow for a common sales object to be built
  validate,
  onSubmit: submit // submit function must be passed to onSubmit
})(MainForm);
// You have to connect() to any reducers that you wish to connect to yourself
const selector = formValueSelector('mainForm')
MainReduxForm = connect(
  state =>
  ({
    synchronousError : getFormSyncErrors('mainForm')(state), // change name here
    initialValues: state.account.data
  }),
  { load: loadAccount }, // bind account loading action creator
)(MainReduxForm);
export default MainReduxForm;

我制作了演示工作代码box to