reduxForm - initialValues ​​galt nicht nach dem Update

Question

Ich benutze Redux Form Version 6.8.0.

Ich habe eine Formularkomponente, die es ist "InitialValues" über eine "MapStateToProps" -Funktion. Auf dem ersten Render funktioniert alles ganz gut.

meine Form Config Folgende:

const CategoryChangeForm = reduxForm({ 
    form: 'change-category', 
    validate: newCategoryValidate, 
    enableReinitialize: true 
})(CategoryChange); 

Wenn ich das Feld „Kategorie“ ändern und das Update erfolgreich zu sein, erhalte ich den neuen aktualisierten Wert von Feuerbasis. gebe ich diesen aktualisierten Wert über die erwähnte „mapStateToProps“ -Funktion auf die „Ausgangsw“:

function mapStateToProps(state, ownProps) { 
    return { 
    initialValues: { category: state.categories[ownProps.id].name, id: ownProps.id } 
    }; 
} 

I erwartet dass der neue Wert in die „Kategorie“ -Field Komponente angewendet werden würde. Aber es erhält den aktualisierten Wert nicht.

Die Konfiguration meiner "Feld" Komponenten:

const fieldProps = { 
    category: { 
    name: 'category', 
    type: 'text', 
    placeholder: 'Bezeichnung', 
    component: InputField 
    }, 
    hidden: { 
    name: 'id', 
    type: 'hidden', 
    component: 'input' 
    } 
}; 

und hier ist meine Form Komponente:

export const CategoryChange = props => { 
    const { 
    color, 
    message, 
    handleSubmit, 
    stateComponent 
    } = props; 

    console.log("Props: ", props); 

    return (
    <span> 
     <Subline color={ color } marginTop={ 70 } marginBottom={ 30 } align="center">{ message }</Subline> 
     <form> 
     <Field { ...fieldProps.category } /> 
     <Field { ...fieldProps.hidden } /> 
     <Button onClick={ handleSubmit(changeCategory.bind(stateComponent)) }>Ändern</Button> 
     <Button marginBottom={ 5 } marginTop={ 10 }>Löschen</Button> 
     </form> 
    </span> 
); 
} 

ich, dass nach einem Update beobachten, meine Form Komponente rerenders 2 mal. Zum ersten Mal wird seine Prop "initialisiert" auf "wahr" gesetzt. Aber das zweite Mal ist es auf "falsch" eingestellt. Das zweite Rendern tritt aufgrund eines stateChange der Hoc-Komponente auf, die meine Formularkomponente umgab. Der "setState" für den Hoc wird ausgelöst, wenn das Update erfolgreich war und dem Benutzer eine entsprechende Nachricht anzeigen. Aber wegen der zweiten Render wurde die Formularkomponente nicht initialisiert.

Wenn Sie mehr Code benötigen zu sehen, lassen Sie es mich wissen.

Hoffnung hat jemand einen Hinweis, dieses Problem zu lösen ...

Answer 1

According to the docs:

standardmäßig Sie können nur eine Formularkomponente initialisieren einmal über Ausgangsw. Es gibt zwei Methoden, um die Form Komponente mit neuen „unberührten“ Werten neu zu initialisieren:

1. Pass einem enableReinitialize prop oder reduxForm() Konfig Parameter auf wahr dem Formular die Reinitialisierung mit neuen „unberührten“ Werten zu ermöglichen, jedes Mal, wenn sich die Propeller für initialValues ​​ändern. Um die Werte für das Formular beim Neuinitialisieren beizubehalten, können Sie keepDirtyOnReinitialize auf true festlegen. Nach ersetzt das Reinitialisieren des Formulars standardmäßig alle unsauberen Werte durch "unberührte" Werte.

2. Versenden Sie die Aktion INITIALIZE (unter Verwendung des Aktionserstellers redux-form).

Sie können CategoryChangeForm von Funktion Klasse ändern und initialize Aktion von redux-forms im componentWillReceiveProps Methode aufrufen.

import {initialize} from 'redux-form' 

CategoryChangeForm extends Component { 
    ... 
    componentWillReceiveProps(nextProps) { 
     // check the props and call initialize when needed 
    } 
} 

mapDispatchToProps = dispatch => ({ 
    initialize: (data) => initialize('change-category', data) 
})