redux 양식 필드 컴포넌트를 내보내는 방법은 무엇입니까?

Question

양식의 입력 값을 자동 입력하려고합니다. load 버튼을 클릭 할 때 데이터를로드해야하는 load라는 함수가 있습니다. 저는 redux 형식으로 작업 해 왔고 initialValues ​​소품을 사용하려면 Field 구성 요소를 사용해야합니다. 그러나 추가 할 때마다이 오류가 발생합니다.

"요소 유형이 유효하지 않습니다. 문자열 (기본 제공 구성 요소의 경우) 또는 클래스/함수 (복합 구성 요소의 경우)가 있어야하지만 미정의 값입니다. 정의 된 파일에서 구성 요소를 내보내십시오. "

나는 이것이 내가 내보내는 것과 관련이 있다고 가정하고 있습니다. (다른 감속기에서 가져 오는 초기 값에 액세스하려면 필드 구성 요소를 사용해야합니까? 일반 입력을 사용하면 초기 값도로드되지 않습니다.) 다음은 코드 감사입니다! 데이터를로드

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

감속기 : 당신은 v5 및 v6 구문을 혼합하는

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

. Migration Guide을 참조하십시오.

v5에는 Field 구성 요소가 없습니다. v6에서 reduxForm()으로 장식 할 때 더 이상 필드 배열을 지정하지 않습니다.

그 외에도 내가 내보내려고하는 것이 확실하지 않습니다. 단일 필드 구성 요소? 또는 필드 그룹?