I'm wrapping my app inside an IntlProvider
from react-intl
v2, like this:
<IntlProvider locale={this.props.lang} messages={this.props.messages}>
And I have my react-form
forms down the tree. Everything is great.
But if I'm starting to fill up a form, and I decide to change the language of the UI (by listening to an action that will update my lang
and messages
props through my redux store), the form is being reset :-/
I see the action redux-form/INITIALIZE
being fired when the lang changes.
And it happens even if I pass destroyOnUnmount: false
to reduxForm()
.
It did not happen with uncontrolled form fields.
Any idea?
My code: App.js + Register form
Hmm... You are changing your initialValues
prop, so it's initializing the form data. initialValues
is intended to be used for canonical data from the server to be edited (e.g. a loaded record), not really for updating individual form values from outside the component.
Perhaps you could use the plugin()
API to notice the language change action (is that being changed via Redux?) and update the lang
value in your form?
We encountered the same issue when combining react-relay
with redux-form
. The solution was simple: we initialize the form when the form is mounted.
compose(
createContainer({
fragments: {
viewer: () => Relay.QL`
fragment on User {
nickname
email
}
`
}
}),
reduxForm({
form: "user",
fields: ["nickname", "email"],
})
)(
class UserForm extends Component {
componentWillMount() {
this.props.initializeForm(this.props.viewer)
}
render() {
// Same as before
}
}
)
来源:https://stackoverflow.com/questions/35858406/my-redux-form-is-reinitialized-when-switching-language-by-changing-react-intl-wr