redux-form（版本 6.4.3）不显示错误

Question

下面是 redux-form 的代码。一切都与 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>
        )
    }
}

我可以清楚地看到验证功能有效（见下面的屏幕截图）

但是 <span></span> 元素中没有任何内容，这意味着 field.error 没有值。我也根本没有收到错误消息。

有人知道这是怎么回事吗？

谢谢，托马斯

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

redux-form（版本 6.4.3）不显示错误

redux-form (version 6.4.3) does not display errors

reactjs

redux-form