Redux 表单验证在 onChange 处理程序函数之后运行

Question

我有以下 redux 形式：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm, getFormSyncErrors } from 'redux-form';
import { createExpense } from '../../actions';
import { validateName, validateImage } from '../../helpers/expense_utils';
import { renderInputField, validate, renderTextAreaField, renderDropzoneField } from '../../helpers/form_utils';
const validators = [
  {
    field: 'title',
    validator: validateName
  },
  {
    field: 'description',
    validator: validateDescription
  },
  {
    field: 'amount',
    validator: validateAmount
  },
  {
    field: 'image',
    validator: validateImage
  }
];
class NewExpense extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: undefined,
      imagePreviewUrl: undefined
    };
  }
  _onSubmit = values => {
    let formData = new FormData();
    formData.append('title', values.title);
    formData.append('description', values.description);
    formData.append('amount', values.amount);
    formData.append('file', values.image[0]);
    this.props.createExpense(formData, this.props.groupId, () => this.props.onClose(), error => this.setState({error: error}));
  }
  _onImagePreviewChange = files => {
    //this.props.inputErrors.image is one step behind 
    this.setState({
      imagePreviewUrl: files[0].preview
    });
  }
  render() {
    const { handleSubmit } = this.props;
    const { imagePreviewUrl } = this.state;
    return (
      <div>
        <form onSubmit={ handleSubmit(this._onSubmit.bind(this)) }>
          <Field name="title" label="Name" type="text" component={ renderInputField }/>
          <Field onChange={this._onImagePreviewChange.bind(this)} previewUrl={ imagePreviewUrl } name="image" label="Image" component={ renderDropzoneField } />
          <button type="submit" className="btn btn-primary">Create</button>
          <button type="button" className="btn btn-primary" onClick={this.props.onClose}>Cancel</button>
        </form>
        { this.state.error ? <span>{this.state.error}</span> : <noscript/> }
      </div>
    );
  }
}
export default connect(state => ({
  inputErrors: getFormSyncErrors('NewExpense')(state)
}), { createExpense })(reduxForm({
  validate,
  form:'NewExpense',
  validators
})(NewExpense));

我想访问_onImagePreviewChange 中表单的字段级错误，并在mapStateToProps中设置inputErrors。

问题是验证函数在处理程序函数之后运行onChange。因此，错误消息始终是过时的。例如，如果用户选择不允许类型的文件，则消息将被undefined，下次如果用户选择允许类型的文件，这次不会undefined，因为在上一步中为其分配了错误。

为什么会发生这种情况，我应该如何解决？

Answer 1

验证只能在某些字段更改后运行，这就是为什么第一次使用无效值调用_onImagePreviewChange时，仍然没有验证错误(正如您所说，验证落后一步(。

我建议使用componentWillReceiveProps方法，并在该方法中访问下一个和当前的验证错误，检查是否已修复或生成某些错误，并采取您需要采取的行动。例如：

 componentWillReceiveProps(newProps) {
    // here newProps.inputErrors is up-to-date while this.props.inputErrors is the current
    if (newProps.inputErrors && newProps.inputErrors !== this.props.inputErrors) {
      console.log(newProps.inputErrors); // up-to-date input errors
      if (newProps.inputErrors.image) {
        // clear invalid image field if you need to
        this.props.change('image', '');
      }
    }
  }