如何导出Redux表单字段组件？ [英] How to export redux form Field component?

问题描述

我正在尝试自动填写表单的输入值。我有一个名为load的函数，当单击一个按钮时需要加载数据。
我一直在使用redux表单，并且需要使用Field组件来与initialValues道具一起使用。但是，每次我添加它时，都会出现此错误：

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."

我假设这与我的工作方式有关正在出口。 （我是否甚至需要使用Field组件来访问从另一个reducer导入的初始值？使用常规输入也不会加载初始值。）这是代码，谢谢！

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
  }
}

减速器：

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 语法。请参阅迁移指南。

You are mixing v5 and v6 syntax. See the Migration Guide.

v5 没有 Field 组件。在 v6 中，用 reduxForm（）装饰时，不再指定字段数组。

v5 didn't have a Field component. In v6, you no longer specify an array of fields when you decorate with reduxForm().

除此之外，我不确定您要导出的内容。单个字段组件？还是一组字段？

Apart from that, I'm not sure what you are trying to export. A single field component? Or a group of fields?

这篇关于如何导出Redux表单字段组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！