使用 redux-form 驗證檢索錯誤

Question

這是我在 stackOverflow 上的第一個問題 :) 我搜索了一段時間，但我沒有解決我的問題......然后我要求你的幫助；）

這是我的組件形式：

import React from 'react';
import styles from './subscribe.css';
import { Field, reduxForm, propTypes } from 'redux-form';
import { validateSubscribeForm, renderBasicField, renderEmailField } from '../Shared/formUtils';

class SubscribeForm extends React.Component {

  render () {
    const { handleSubmit } = this.props;
    return (
      <div className={styles.container}>
        <div className={styles.form}>
          <form onSubmit={handleSubmit(validateSubscribeForm)}>
            <div>
              <Field name='firstname' type='text' label='Prénom' component={renderBasicField} />
            </div>
            <div>
              <Field name='lastname' type='text' label='Nom' component={renderBasicField} />
            </div>
            <div>
              <Field name='email' type='email' label='Email' component={renderEmailField} />
            </div>
            <div>
              <button className='btn btn-info' type='submit'>Submit</button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

SubscribeForm.propTypes = {
  fields: React.PropTypes.shape({
    email: React.PropTypes.string,
    firstname: React.PropTypes.string,
    lastname: React.PropTypes.string
  }),
  handleSubmit: propTypes.handleSubmit
};

export default reduxForm({
  form: 'subscribe',
  validateSubscribeForm
})(SubscribeForm);

然后我在該組件中使用的功能：

import React from 'react';

export const renderBasicField = (field) => {
  console.log('field ', field);
  return (<div className='input-row form-group has-success has-feedback'>
    <input {...field.input} className='form-control' type='text' placeholder={field.label} />
    {field.meta.touched && field.meta.error &&
    <span className='error'>{field.meta.error}</span>}
  </div>);
};

export const renderEmailField = (field) => (
  <div className='input-row form-group has-success has-feedback'>
    <div className='input-group'>
      <span className='input-group-addon'>@</span>
      <input {...field.input} type='text' className='form-control' placeholder={field.label} id='inputGroupSuccess1' aria-describedby='inputGroupSuccess1Status' />
        {field.meta.touched && field.meta.error &&
        <span className='error'>{field.meta.error}</span>}
    </div>
  </div>
);

export const validateSubscribeForm = values => {
  const errors = {};
  console.log('values : ', values);
  if (!values.firstname) errors.firstname = 'Un nom est requis';
  if (!values.lastname) errors.lastname = 'Un nom est requis';
  if (!values.email) errors.email = 'Un email est requis';
  else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    errors.email = 'Adresse email invalide';
  }
  console.log('Errors: ', errors);
  return errors;
};

最后，我在哪里聲明我的減速器（應用程序根目錄下的應用程序容器組件）：

const rootReducer = combineReducers({
  userConnection: connection,
  tennisSearch: reducer,
  subscribe: subscribeReducer,
  form: formReducer,
  routing: routerReducer
});

我遇到的問題是我無法在我的 renderField 函數中填充我的 field.error 信息......我不明白，因為調用了驗證函數來填充包含問題的錯誤數組。 似乎我的表單組件在提交時沒有刷新，即使我覺得我正確聲明了減速器......即使我在redux-form 文檔中花了很長時間，我也無法完成這項工作.. .

知道是什么問題嗎？ 我在網上檢查了一些例子，我找到了一些，但沒有使用我使用的 redux-form 提出的 Field 組件...... :)

非常感謝你的幫助！

ps：我是 javascript 和編碼的新手，所以我可能犯了一個初學者的錯誤……這對你的分析很有幫助；)

Answer 1

驗證函數的名稱應該是'validate'，所以你不能使用es6語法，只需將其更改為：

export default reduxForm({
  form: 'subscribe',
  validate: validateSubscribeForm
})(SubscribeForm);