Wie Reduxformular exportieren Feldkomponente?

Question

Ich versuche, die Eingabewerte eines Formulars automatisch zu füllen. Ich habe eine Funktion namens load, die die Daten laden muss, wenn auf eine Schaltfläche geklickt wird. Ich habe mit Redux-Formular gearbeitet, und ich muss die Field-Komponente verwenden, um mit der Propeller initialValues ​​zu arbeiten. jedes Mal wenn ich es hinzufügen, jedoch bekomme ich diesen Fehler:

„Elementtyp ist ungültig: eine Zeichenfolge (für eingebaute Komponenten) oder eine Klasse/Funktion (für Composite-Bauteile) erwartet, aber bekam. undefined Sie wahrscheinlich vergessen um Ihre Komponente aus der Datei zu exportieren, in der sie definiert ist. "

Ich nehme an, das hat etwas damit zu tun, wie ich exportiere. (Muss ich die Field-Komponente sogar verwenden, um auf die Anfangswerte zuzugreifen, die ich von einem anderen Reducer importiere? Das Verwenden von regulären Eingängen lädt auch keine Anfangswerte.) Hier ist der Code - danke!

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) 

Aktion Schöpfer, der die Daten geladen werden:

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 

Answer 1

Sie sind v5 und v6 Syntax zu mischen. Siehe Migration Guide.

v5 hatte keine Field Komponente. In v6 geben Sie kein Array von Feldern mehr an, wenn Sie mit reduxForm() dekorieren.

Abgesehen davon bin ich mir nicht sicher, was Sie exportieren möchten. Eine einzelne Feldkomponente? Oder eine Gruppe von Feldern?