2017-08-08 3 views
7

Ich habe ein Redux-Formular und ich versuche das Formular mit initialValues zu initialisieren. In Anbetracht des folgende Code, wird das Formular nicht mit bevölkert wird, entweder den Namen oder das Alter:redux-form initialValues ​​wird als Map erstellt

const EmployeesForm = reduxForm({ 
    form: 'addEmployee', 
    enableReinitialize: true 
})(EmployeesFormComponent) 

export default connect((state, ownProps) => { 
    const initialValues = { name: 'Jason', age: 24 } 
    return { 
    initialValues: initialValues 
    } 
})(EmployeesForm) 

Aber in der Web-Entwickler-Konsole, wenn die next state auf Redux Inspektion, kann ich sehen, dass form.values und form.initial beide Karten sind Objekte, die diese initialValue-Werte enthalten.

enter image description here

Wie soll ich das Objekt werden verwandeln, so dass es „passt“ in die Form. BTW Ich verwende: import { Field, reduxForm } from 'redux-form/immutable' und es ist Redux-Form 6.8.0.

+1

Soweit ich sehe, sieht Ihr Code gut aus und tatsächlich funktioniert es in dieser Sandbox: https://codesandbox.io/s/6xnrvwx3mn. Vielleicht ist das Problem woanders in deinem Code? Kannst du eine Sandbox vorbereiten, die das Problem reproduziert? – Dario

Antwort

1

Es könnte ein Problem mit Ihrer reaktiven nativen Felddefinition sein.

<Field name="name" component={TextInput} /> 
<Field name="age" component={TextInput} /> 

Stellen Sie sicher, dass dies die richtige Definition Ihres Formulars ist. Wenn Sie können auch die Komponente Markup hinzufügen, so dass es leicht zu debuggen wird.

auch ein komplizierter Teil in reagieren-native mit redux-Form ist onChangeText Rückruf statt onChange so um, dass zu berücksichtigen erhalten Sie einen Wrapper um die reagieren-native Textinput-Komponente erstellen müssen

const TextInputNative = ({ input: { onChange, ...inputProps }}) => { 
    return <TextInput onChangeText={onChange} 
      {...inputProps} /> 
} 

const EmployeesFormComponent =() => (
     <Field name="name" component={TextInputNative} /> 
     <Field name="age" component={TextInputNative} /> 
); 

Dies könnte auch verhindern, dass Ihr Formular mit den Anfangswerten aktualisiert wird.

0

Soweit immutableJS geht, sollten Sie in der Lage sein, Ihre initialValue als Objekt zu erhalten, indem yourMap.toJS()

mit Aber Sie müssen nicht manuell müssen Sie Ihre Karte in ein Objekt konvertieren, wie es der Pflege von redux-form/immutable genommen und wie pro redux-Form docs

Wenn Sie die unveränderliche Version von redux-Form verwenden, die Werte, die Form Redux gibt Ihnen für die Validierung und Vorlage in einem Immutable.Map wird

Falls Sie die unveränderliche Karte und den ganzen Jazz nicht brauchen, würde ich empfehlen, für die unveränderbare Version von reduxform zu gehen.

Verwandte Themen