redux-form（バージョン6.4.3）にエラーが表示されない

Question

以下はredux形式のコードです。すべてreduxストアで美しく動作しますが、エラーメッセージをspan要素に表示することはできません。

import React from 'react' 
import { Button } from 'react-bootstrap' 
import { Field, reduxForm } from 'redux-form' 

const validate = (values) => { 
    const errors = {} 
    if (!values.firstname) { 
     errors.firstname = 'Required' 
    } 
    return errors 
} 

const renderInput = (field) => (
    <div> 
     <label>{field.placeholder}</label> 
     <div> 
      <input {...field.input}/> 
      {field.error && <span>{field.error}</span>} 
     </div> 
    </div> 
) 

@reduxForm({ 
    form: 'addUserForm', 
    validate 
}) 

export default class CreateUserForm extends React.Component { 
    render() { 
     const {addUser, handleSubmit} = this.props 
     return (
      <form onSubmit={handleSubmit(addUser)}> 
       <Field type="text" placeholder="First name" component={renderInput} name="firstname" /> 
       <Button type="submit" className="btn btn-success">Submit</Button> 
      </form> 
     ) 
    } 
} 

私は、検証機能が動作することを

（下のスクリーンショットを参照）はっきり見ることができますが、何もfield.errorは何を持っている意味ない<span></span>要素ではありません値。また、エラーメッセージも表示されません。

ここで何が起こっているのか誰かが知っていますか？

おかげで、 トーマス

Answer 1

あなたrenderInputは不完全です。

公式documentショー：

const renderField = ({ input, label, type, meta: { touched, error, warning } }) => (
    <div> 
    <label>{label}</label> 
    <input {...input} placeholder={label} type={type}/> 
    { 
     touched && (
     (error && <span>{error}</span>) || (warning && <span>{warning}</span>) 
    ) 
    } 
    </div> 
) 

は、オブジェクトを観察し、renderFieldに渡されたパラメータ：それに関してはmeta: { touched, error, warning }

、あなたのrenderInputはすべきではない：

const renderInput = (field) => (
    <div> 
    <label>{field.placeholder}</label> 
    <div> 
     <input {...field.input}/> 
     {field.meta.error && <span>{field.meta.error}</span>} 
    </div> 
    </div> 
) 

欠落します= >field.meta.error