如何導出redux表單字段組件？

我正在嘗試自動填充表單的輸入值。我有一個稱爲load的函數，當點擊一個按鈕時需要加載數據。我一直在使用redux窗體，我需要使用Field組件來處理initialValues道具。然而，每當我添加它，我得到這個錯誤：如何導出redux表單字段組件？

「元素類型是無效的：期望一個字符串（對於內置組件）或類/函數（對於複合組件），但得到：undefined。從您定義的文件中導出組件。「

我假設這與我如何導出有關。（我是否甚至需要使用Field組件來訪問我從另一個Reducer導入的初始值？使用常規輸入也不會加載初始值。）下面是代碼 - 謝謝！正在加載數據

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

來源

2017-03-06 nattydodd

你可以發佈'../actions/index'模塊裏面發生了什麼嗎？順便說一句'../actions'就足夠了，因爲在導入index.js文件時你只需要指定目錄名。 – Shota

@Shota我在上面添加了動作創建器和縮放器。它只是採用常量中定義的數據（基本上使用autoFill簡化器中的道具並重新組織它），並以匹配表單輸入字段的格式返回它。謝謝！ – nattydodd

你混合v5和v6語法。請參閱Migration Guide。

v5沒有Field組件。在v6中，當您使用reduxForm()裝飾時，不再指定一組字段。

除此之外，我不確定你試圖導出什麼。單個字段組件？還是一組領域？

來源

2017-03-06 19:10:17

如何導出redux表單字段組件？

回答

相關問題