Skip to content
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

use react-hot-loader/patch,I can't setState in function that bind 'this' in constructor #597

Closed
ghost opened this issue Jun 27, 2017 · 5 comments

Comments

@ghost
Copy link

ghost commented Jun 27, 2017

Description

When I use react-hot-loader,I put the react-hot-loader/patch in the first line of the entry index file,then in the app file,I create one react Component which only has 2 input.the difference of the 2 inputs is that one bind an onChange function which bind this in the constructor and another input bind an onChange function which bind this in render.I expect that the 2 input has the same behavior,but not so in real.the input bind onChange function which bind this in constructor got an error setState(...): Can only update a mounted or mounting component.

But when i remove the react-hot-loader/patch from the entry file,the 2 input has the same behavior.I don't know why it is this.

Expected behavior

a react component bind an event function that bind this in constructor can call setState correactly

Actual behavior

when a react component bind an event function that bind this in constructor ,when i call setState,it throw an error Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the _default component.

Environment

React Hot Loader version:3.0.0-beta.7

Run these commands in the project folder and fill in their results:

  1. node -v:7.9.0
  2. npm -v:4.2.0
  3. Operating system:Win10 64-bit
  4. Browser and version:Chrome 59

Reproducible Demo

react-hot-loader-bind-this-test

@smikitky
Copy link

I think this is a duplicate of #313. This occurs when you are targeting only at recent browsers with native class support. To work around this, try manually enabling transform-es2015-classes plugin in your .babelrc.

@ChuckJonas
Copy link

I'm having the same issue. Targeting ES6

@gregberge
Copy link
Collaborator

I know this bug, we have to add a test for it. It is relative to babel plugin that doesn't work with native class. Help welcome.

@gregberge
Copy link
Collaborator

I close it because it's a duplicate of #313

@corbolt
Copy link

corbolt commented May 16, 2018

@smikitky your comment saved my life!

After upgrading my react app from es2015 to env (targeting latest 2 versions of chrome in order to get async calls working) my app stopped working for the exact reason @IbyH described.

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants