How to export redux form Field component?

问题

I am trying to auto-fill a form's input values. I have a function called load which need to load the data when a button is clicked. I've been working with redux form, and I need to use the Field component to work with the initialValues prop. However, every time I add it I get this error:

"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in."

I'm assuming this has something to do with how I am exporting. (Do I even need to use the Field component in order to access the initial Values that I am importing from another reducer? Using regular inputs doesn't load initial values either.) Here's the code- thanks!

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)

Action creator that is loading the data:

export const LOAD = 'LOAD';

export function load(data) {

  return {
    type: LOAD,
    payload: data
  }
}

Reducer:

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

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


export default reducer