gaearon / gaearon/react-hot-loader
Methods closure is lost after hot reload
- Dominant language
- JavaScript
- Stars
- 12.2k
- Forks
- 775
- PR merge metrics
- No merged PRs in 30d
Description
There are several forms in my project. So I created a generic input change handler:
```
//Very simplistic example of universal-handler.js
export default context => e => {
const { name, value } = e.target
context.setState({
[name]: value
})
}
```
And I use it like this:
```
import { hot } from 'react-hot-loader'
import handle from './universal-handler'
class SomeForm extends React.Component {
constructor() {
super()
this.state = { login: '' }
this.handle = handle(this)
}
render() {
return (
)
}
}
export default hot(module)(SomeForm)
```
First everything goes well. But after a hot reload, when I start typing to the input, I get an
error:
```
Uncaught ReferenceError: context is not defined
at eval (eval at __reactstandin__regenerateByEval (VM48923
App.js:NaN), :10:3)
at HTMLUnknownElement.callCallback (react-dom.development.js:100)
at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
at Object.invokeGuardedCallback (react-dom.development.js:187)
at Object.invokeGuardedCallbackAndCatchFirstError
(react-dom.development.js:201)
at executeDispatch (react-dom.development.js:466)
at executeDispatchesInOrder (react-dom.development.js:488)
at executeDispatchesAndRelease (react-dom.development.js:586)
at executeDispatchesAndReleaseTopLevel
(react-dom.development.js:597)
at Array.forEach ()
```
Because the context is lost:
```
(function REACT_HOT_LOADER_SANDBOX () {
var _this = this; // common babel transpile
var _this2 = this; // common babel transpile
var _this3 = this; // common babel transpile
return function (e) {
var _e$target = e.target,
name = _e$target.name,
value = _e$target.value;
context.setState(_defineProperty({}, name, value));
};
}).call(this)
```
Contributor guide
Assessment
This issue has not been assessed yet.