Ich erstelle ein Formular mit der React- und Redux-Form. Ich verwende die formValueSelector
, um mehrere Eingabefelder zu verbinden. Wenn ich diese Eingabefelder in der Benutzeroberfläche aktualisieren, wird das Formular jedoch nicht erneut gerendert. Mein Code sieht wie folgt aus:Formular wird nicht aktualisiert, wenn der verbundene Wert aktualisiert wird (Redux-Formular)
// HelpForm.jsx
import React from 'react';
import { connect } from 'react-redux';
import { reduxForm, formValueSelector } from 'redux-form';
import CategorySelectBlock from 'apps/help_form/components/CategorySelectBlock';
const selector = formValueSelector('help_form');
const mapStateToProps = state => ({
category: selector(state, 'category'),
subcategory: selector(state, 'subcategory')
});
class HelpForm extends React.Component {
render() {
const {
category,
subcategory
} = this.props;
console.log('Rendering HelpForm');
console.log('category:', category);
console.log('subcategory:', subcategory);
return (
<form id="helpform">
<CategorySelectBlock
category={category}
subcategory={subcategory}
/>
</form>
);
}
}
const ReduxHelpForm = reduxForm({
form: 'help_form'
})(HelpForm);
export default connect(
mapStateToProps
)(ReduxHelpForm);
ich von meinen Konsolenprotokollen sehen kann, dass diese HelpForm Komponente nur einmal machen wird, auch nachdem ich einen neuen Wert für die category
oder subcategory
Felder auswählen (diese innerhalb der CategorySelectBlock
Komponente definiert sind).
Mache ich etwas falsch oder missverstanden wie funktioniert formValueSelector
? Jede Anleitung würde sehr geschätzt werden. Vielen Dank!