Reactjs 如何导出redux表单字段组件？

我正在尝试自动填充表单的输入值。我有一个名为load的函数，它需要在单击按钮时加载数据。 我一直在使用redux表单，我需要使用Field组件来处理initialValues属性。但是，每次我添加它时，都会出现以下错误：

“元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件。”

我想这与我的出口方式有关。（我是否需要使用字段组件来访问从另一个减速器导入的初始值？使用常规输入也不会加载初始值。）以下是代码-谢谢

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)

减速器：

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

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


export default reducer

---

您正在混合

v5

和

v6

语法。看

v5

没有

字段

组件。在

v6

中，使用

reduxForm（）

进行修饰时，不再指定字段数组

---

除此之外，我不确定你们想出口什么。单个字段组件？还是一组字段？

您正在混合

v5

和

v6

语法。看

v5

没有

字段

组件。在

v6

中，使用

reduxForm（）

进行修饰时，不再指定字段数组

---

除此之外，我不确定你们想出口什么。单个字段组件？或者一组字段？

您能发布“../actions/index”模块中的情况吗？顺便说一句，只需“../actions”就足够了，因为导入index.js文件时只需指定目录名。@Shota我在上面添加了action创建者和reducer。它只是获取常量中定义的数据（基本上使用autoFill reducer中的道具并重新组织），然后以与表单输入字段匹配的格式返回数据。谢谢你能发布“../actions/index”模块中发生的事情吗？顺便说一句，只需“../actions”就足够了，因为导入index.js文件时只需指定目录名。@Shota我在上面添加了action创建者和reducer。它只是获取常量中定义的数据（基本上使用autoFill 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