Почему редукция формы возвращает строку вместо объекта?

Question

Я пытаюсь получить доступ к затронутому свойству в моей форме redux, но по какой-то причине, когда я печатаю реквизиты поля, я использую только значение вместо объекта. Что мне не хватает?

import { reduxForm, Field } from 'redux-form'; 

render() { 
    const { fields: { email, phone }, handleSubmit } = this.props; 
    console.log(email) //prints just the value "email" instead of the field object with the touched method, etc. When I do console.log(email.touched) I get undefined error. 
    return (
    <form onSubmit={handleSubmit(this.onSubmit)}> 
     <Field name="email" component="input" type="email" { ...email } /> 
     <Field name="phone" component="input" type="number" { ...phone } />  
    </form> 
); 


} 


export default ReduxFormTest = reduxForm({ 
    form: 'uniqueForm', 
    fields: ['email', 'phone'] 
})(TestClass); 

Answer 1

Были нарушены изменения в редукционных формах от v5 до v6. Раньше вы могли бы сделать что-то похожее на то, что вам нужно получить доступ к затронутому полю. Если вы хотите сделать что-то похожее, чтобы увидеть, есть ли ошибки в поле, вам нужно создать свой собственный компонент, чтобы перейти к компоненту поля redux-form.

Ваш пользовательский компонент

const CustomComponent = function(field) { 
    return (
    <div> 
     <input 
     type={field.type} 
     {...field.input} 
     /> 
     {field.meta.touched && field.meta.error && <div className='error'>{field.meta.error}</div>} 
    </div> 
) 
} 

Затем, используя его с поля компонента

<Field name="my-prop" component={CustomComponent} /> 

Также обратите внимание на миграцию guide, надеюсь, что это помогает!

Answer 2

Вы вводите в заблуждение синтаксис v5 с синтаксисом v6. В v6 ваш оформленный компонент формы больше не передается this.props.fields. Перечитайте руководство по миграции, например, @ tyler-iguchi.