Merge pull request #109 from modosc/fix-error

fix Cannot read property 'removeListener' of undefined
yocontra · Jul 14, 2017 · 694f18e · 694f18e
2 parents 83c2409 + ea3d577
commit 694f18e
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 16 deletions.
diff --git a/dist/react-responsive.js b/dist/react-responsive.js
diff --git a/dist/react-responsive.js.map b/dist/react-responsive.js.map
diff --git a/dist/react-responsive.min.js b/dist/react-responsive.min.js
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
   ],
   "dependencies": {
     "hyphenate-style-name": "^1.0.0",
-    "matchmediaquery": "^0.2.0",
+    "matchmediaquery": "^0.2.1",
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {

diff --git a/src/index.js b/src/index.js
@@ -60,10 +60,7 @@ export default class MediaQuery extends React.Component {
         }, {})
     }
 
-    if (this._mql) {
-      this._mql.removeListener(this.updateMatches)
-      this._mql.dispose()
-    }
+    this.removeMql()
 
     this._mql = matchMedia(this.query, values)
     this._mql.addListener(this.updateMatches)
@@ -83,8 +80,7 @@ export default class MediaQuery extends React.Component {
   }
 
   componentWillUnmount() {
-    this._mql.removeListener(this.updateMatches)
-    this._mql.dispose()
+    this.removeMql()
   }
 
   updateMatches = () => {
@@ -96,6 +92,13 @@ export default class MediaQuery extends React.Component {
     })
   }
 
+  removeMql = () => {
+    if (this._mql) {
+      this._mql.removeListener(this.updateMatches)
+      this._mql.dispose()
+    }
+  }
+
   render() {
     if(typeof this.props.children === 'function') {
       return this.props.children(this.state.matches)

diff --git a/test/index_test.js b/test/index_test.js
@@ -3,6 +3,7 @@ const MediaQuery = require('index')
 const mm = { default: require('matchmediaquery') }
 const assert = require('chai').assert
 const sinon = require('sinon')
+const ReactDOM = require('react-dom')
 const TestUtils = require('react-dom/test-utils')
 
 describe('MediaQuery', function () {
@@ -200,4 +201,14 @@ describe('MediaQuery', function () {
     e.setState({ matches: false })
     assert.isNotFalse(onBeforeChangeCallback.calledBefore(onChangeCallback))
   })
+  it('handles unmount', function () {
+    const container = document.createElement('div')
+    const mq = (
+        <MediaQuery query="all">
+          <div className="childComponent"/>
+        </MediaQuery>
+      )
+    ReactDOM.render(mq, container)
+    assert.doesNotThrow(() => ReactDOM.unmountComponentAtNode(container))
+  })
 })