reduxフォームフィールドコンポーネントのエクスポート方法は？

Question

フォームの入力値を自動入力しようとしています。私は、ボタンがクリックされたときにデータをロードする必要のあるloadという関数を持っています。 私はreduxフォームで作業していました。フィールドコンポーネントを使用してinitialValues propを操作する必要があります。しかし、私はそれを追加するたびに、私はこのエラーを受け取ります：

"要素の種類が無効です：組み込みコンポーネントの文字列または複合/コンポーネントのためのクラス/関数が必要ですが、未定義です。それが定義されているファイルからコンポーネントをエクスポートします。

私はこれがエクスポート方法と関係があると仮定しています。 （他のレデューサーからインポートしている初期値にアクセスするためにフィールドコンポーネントを使用する必要があるのでしょうか？通常の入力を使用しても初期値はロードされません）。データをロードしている

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import { Field, reduxForm } from 'redux-form'; 
import { load } from '../actions/index'; 

class AutoFill extends Component { 

    onInputChange(event) { 
    this.setState({ 
     term: event.target.value, 
    }); 
    } 

render() { 

    if (!this.props.autoFill) { 
    return (
     <div></div> 
    ); 
    } 

    const data = { 
     title: this.props.autoFill.volumeInfo.title, 
     image_url: this.props.autoFill.volumeInfo.imageLinks.thumbnail, 
     publisher: this.props.autoFill.volumeInfo.publisher, 
     pages: this.props.autoFill.volumeInfo.pageCount, 
     language: this.props.autoFill.volumeInfo.language, 
     year: this.props.autoFill.volumeInfo.publishedDate, 
     synopsis: this.props.autoFill.volumeInfo.description 
     } 

    const { fields: { title, authors, isbn, publisher, pages, year, language, description }, handleSubmit, load } = this.props; 


    return (
     <div> 
     <h1>View/Edit information</h1> 
     <h3>{this.props.autoFill.volumeInfo.title}</h3> 
     <div> 
      <button type="button" onClick={() => load(data)}>Auto-Fill</button> 
     </div> 
     <form onSubmit={handleSubmit}> 
      <Field component="input" type="text" className="form-control" name="title" onChange={this.onInputChange} {...title} /> 
      <Field component="input" type="text" className="form-control" name="publisher" onChange={this.onInputChange} {...publisher} /> 
      <Field name="pageCount" component="input" className="form-control" type="text" onChange={this.onInputChange} {...pages} /> 
      <Field name="language" component="input" className="form-control" type="text" onChange={this.onInputChange} {...language} /> 
      <Field name="publishedDate" component="input" className="form-control" type="text" onChange={this.onInputChange} {...year} /> 
      <Field name="description" component="input" className="form-control" type="textarea" onChange={this.onInputChange} {...description} /> 
      <button type="submit">Submit</button> 
     </form> 
     </div> 
    ); 
    } 

} 

AutoFill.propTypes = { 
    fields: PropTypes.object.isRequired, 
    handleSubmit: PropTypes.func.isRequired 
} 

export default reduxForm({ 
    form: 'AutoForm', 
    fields: ['title', 'authors', 'isbn', 'publisher', 'pages', 'year', 'language', 'description'] 
}, 
state => ({ 
    autoFill: state.autoFill, 
    //state.autoFill is what brings in the initial object that has the data. 
    initialValues: state.load.data 
}), 
{ load } 
)(AutoFill) 

アクション作成者：

export const LOAD = 'LOAD'; 

export function load(data) { 

    return { 
    type: LOAD, 
    payload: data 
    } 
} 

リデューサー：

import { LOAD } from '../actions/index'; 

const reducer = (state = {}, action) => { 
    switch (action.type) { 
    case LOAD: 
     return { 
     data: action.data 
     } 
    default: 
     return state 
    } 
} 


export default reducer 

Answer 1

あなたがv5とv6構文を混合しています。 Migration Guideを参照してください。

v5は、Fieldコンポーネントを持っていませんでした。 v6には、reduxForm()で飾るときに、フィールドの配列を指定しなくなりました。

それ以外は、あなたがエクスポートしようとしていることはわかりません。 1つのフィールドコンポーネント？またはフィールドのグループですか？