gaearon / gaearon/react-hot-loader

Methods closure is lost after hot reload

Open
#978 15 comments 0 reactions 0 assignees View on GitHub
help wanted
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.