Question

所以我有一个redux-form组件，它有一个validate函数，返回带有Field ...

的值

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

记录以下内容返回undefined ...

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

我觉得我犯了语法错误，因为我希望这会将状态的syncErrors部分作为对象返回...它在form.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内部使用的关键字，不能作为表单组件的prop使用。您需要将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;

我做了 demo working codesandbox

如何使用redux-form选择器将syncErrors从状态中移出

1 个答案: