-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Form doesn't reinitialize when replaced #3435
Comments
This also is the case after a form submission using a pure component with React 15React 16 |
@kjanoudi same thing here :( It's good to know that I'm not alone. This was such a massive change from React that breaks so much stuff and not only with redux-form: |
React 16 compatilbility is crucial. Would love to see this made a high priority. |
Shocked this isn't getting more attention. Guess I'll be waiting to upgrade to React 16 |
Is it obvious to anyone how to solve this? It isn't to me.
|
@erikras I'm less concerned with the behavior on hot reloading as opposed to in production. I'm experiencing the scenario I outlined above on a production build of my app. After saving the form and remaining on the same screen, previously the form would not clear. Presently, it clears. |
@erikras sorry for the confusion. I edited the title and description. It happens every time the form instance gets replaced. |
And it's also not clear to me how to solve this. Maybe by initializing the form on didMount as well? If only React passed a parameter to |
Can we move the initialization logic from |
Any progress on this? This issue prevents me from upgrading to React 16 and forces me to still use Redux-form 6.6.3. |
Should there be an announcement on the README.md that lets people know this library doesn't quite work with React 16? I got really far down the Redux-Form rabbithole and now have to redo my form architecture, which is fine, but it might be good to save people from the same. |
Isn't this fixed in 7.1.2? Seems like the problem I was having doesn't occur anymore. |
@janpe I missed that release!!! It does solve this problem for me. Thanks for the heads up! |
Nice!! @eliseumds can you also confirm v7.1.2 fixes it for you? |
@gustavohenke unfortunately it doesn't :S On hot reload, forms still end up destroyed. |
This is not fixed in 7.1.2 and was a nasty surprise for me. DESTROY is being called after INITIALIZE of the new form. |
is there any progress on addressing these issues @erikras ? |
it seems like moving the logic into initialize React ensuring the order of events really screws with the logic in redux-form. Is there a way to only destroy the form if not being replaced? |
Just a quick thought: I wonder if in the meantime until this is fixed, a user-land fix would be to use React's key prop to force (or not) mounting and unmounting? Does the same lifecycle order persist? I haven't tested anything, it's just an idea. |
While this is still being figured out on the redux-form side, we have a solution that we think solves this. Basically we created a HOC that is meant to be a temporary replacement for reduxForm() that wraps it and calls |
Fix published in |
7.2.0 did not fix this issue for me :/ |
same here |
The same problem with REGISTER_FIELD and UNREGISTER_FIELD for one form when mounting and unmounting components has Field with the same name v7.2.0. |
As well here with the same issue, please help at least with temporary workaround. |
Any update on this? Why is the issue closed? |
Still broken for me with 7.2.0, i have the same behavior of it being destroyed as the last step after being initialized properly. |
I came across this funny behaviour a wee bit ago too using Original code causing bad behaviour: class MyComponent extends Component {
render() {
return (
{
props.someBool === true
? (
<MyReduxForm1 />
) : (
<MyReduxForm2 />
)
)
}
} Modified code which no longer demonstrates the bad behaviour: class MyComponent extends Component {
render() {
if (props.someBool === true)
return (
<MyReduxForm1 />
)
else
return (
<MyReduxForm2 />
)
}
} |
Okay guys, I had opportunity to avoid this issue. That's kind of sucks, but it works and form is not destroyed in the end. In my case it occured because of BAD Example (destroy in the end): <Route
path={`${props.match.url}/step-0`}
component={compProps => <GetStartedScreen base={props.match.url} {...compProps} />}
/> GOOD Example (NO destroy in the end): <Route
path={`${props.match.url}/step-0`}
render={compProps => <GetStartedScreen base={props.match.url} {...compProps} />}
/> So in my case this small change helped me to resolve the issue. |
Adding enableReinitialize made things work for me |
@kjanoudi but are the validations still working? |
I haven't had any issues with validations. |
I'm not very happy with the solution, here are my 2 cents: The lifecycle events of react are to setup and cleanup component state. Currently redux-form binds redux state to the component using a As a workaround I'm using a redux middleware, which makes sure to drop the
|
@tkvw Thanks so much dude, it works for me. |
Other than @tkvw 's middleware, I also have to set |
@tkvw @tapesec @ZizhangAi keep in mind that you can't increment the counter on reinitilization (which is INITIALIZE itself). Ideally we'd have a proper flag indicating that the action is for reinitilization, but all I could find was case actionTypes.INITIALIZE:
// bypass reinitialization
if ('lastInitialValues' in action.meta) {
return next(action);
}
state[action.meta.form] = (state[action.meta.form] || 0) + 1;
return next(action); |
Related to this redux-form bug: redux-form/redux-form#3435 (comment)
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
Are you submitting a bug report or a feature request?
Bug report. I'm seeing React lifecycle methods being called in a different order with React 16 which breaks the forms (leaving them destroyed).
Expected order
Actual order
It looks like it's an expected behaviour but it leads to issues because the forms don't reinitialize.
The text was updated successfully, but these errors were encountered: