gaearon/react-hot-loader

Methods closure is lost after hot reload

Open

#978 opened on 2018年5月15日

GitHub で見る
 (15 comments) (0 reactions) (0 assignees)JavaScript (12,265 stars) (844 forks)batch import
help wanted

説明

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 (
         <form>
            <input
               type='text'
               name='login'
               value={this.state.login}
               onChange={this.handle}
            />
         </form>
      )
   }
}

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), <anonymous>: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 (<anonymous​>)

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)

コントリビューターガイド

Methods closure is lost after hot reload · gaearon/react-hot-loader#978 | Good First Issue