StructureBuilder / react-keep-alive

A component that maintains component state and avoids repeated re-rendering.
MIT License
983 stars 105 forks source link

Cannot read property 'on' of undefined #46

Closed GongJS closed 5 years ago

GongJS commented 5 years ago

App.tsx

import React, { useEffect } from 'react';
import {
  Provider as KeepAliveProvider,
} from 'react-keep-alive'
import Login from './pages/login/Login';
import Index from './pages/index/Index';
import Post from './pages/post/Post'
import Info from './pages/info/Info'
import Person from './pages/person/Person'
import Chat from './pages/chat/Chat'
import {
  BrowserRouter as Router,
  Route,
} from 'react-router-dom';
import Store from './store'

const App: React.FC = () => {
  return (
    <Store>
      <Router>
        <KeepAliveProvider>
          <Route exact path="/" component={Index} />
          <Route exact path="/login" component={Login} />
          <Route exact path="/post" component={Post} />
          <Route exact path="/info" component={Info} />
          <Route exact path="/person" component={Person} />
          <Route exact path="/chat" component={Chat} />
        </KeepAliveProvider>
      </Router>
    </Store>
  );
}

export default App;

demo.tsx:

...
import {useKeepAliveEffect} from 'react-keep-alive';
  // 下拉到底部触发更新
  const loadCallback = () => {
    setPage(page => page + 1)
    getCirclePost()
  }
  useLayoutEffect(() => {
    initCirclePost()
  }, [])  // eslint-disable-line
  useKeepAliveEffect(() => {
    return () => {
    };
  });
...

TypeError:

TypeError: Cannot read property 'on' of undefined
    at useKeepAliveEffect.js:22
    at ma (react-dom.production.min.js:4439)
    at react-dom.production.min.js:5048
    at Wa (react-dom.production.min.js:5067)
    at ui (react-dom.production.min.js:3473)
    at Index.tsx:70
    at c (runtime.js:45)
    at Generator._invoke (runtime.js:264)
    at Generator.e.<computed> [as next] (runtime.js:98)
    at r (asyncToGenerator.js:3)

package.json

"dependencies": {
    "@babel/core": "7.4.3",
    "@babel/plugin-transform-react-jsx-self": "^7.2.0",
    "@babel/plugin-transform-react-jsx-source": "^7.5.0",
    "@svgr/webpack": "4.1.0",
    "@types/jest": "24.0.15",
    "@types/node": "12.6.8",
    "@types/react": "16.8.23",
    "@types/react-dom": "16.8.5",
    "@types/react-router-dom": "^4.3.4",
    "@typescript-eslint/eslint-plugin": "1.6.0",
    "@typescript-eslint/parser": "1.6.0",
    "axios": "^0.19.0",
    "babel-eslint": "10.0.1",
    "babel-jest": "^24.8.0",
    "babel-loader": "8.0.5",
    "babel-plugin-named-asset-import": "^0.3.2",
    "babel-preset-react-app": "^9.0.0",
    "camelcase": "^5.2.0",
    "case-sensitive-paths-webpack-plugin": "2.2.0",
    "css-loader": "2.1.1",
    "dotenv": "6.2.0",
    "dotenv-expand": "4.2.0",
    "eslint": "^5.16.0",
    "eslint-config-react-app": "^4.0.1",
    "eslint-loader": "2.1.2",
    "eslint-plugin-flowtype": "2.50.1",
    "eslint-plugin-import": "2.16.0",
    "eslint-plugin-jsx-a11y": "6.2.1",
    "eslint-plugin-react": "7.12.4",
    "eslint-plugin-react-hooks": "^1.5.0",
    "file-loader": "3.0.1",
    "fs-extra": "7.0.1",
    "html-webpack-plugin": "4.0.0-beta.5",
    "identity-obj-proxy": "3.0.0",
    "is-wsl": "^1.1.0",
    "jest": "24.7.1",
    "jest-environment-jsdom-fourteen": "0.1.0",
    "jest-resolve": "24.7.1",
    "jest-watch-typeahead": "0.3.0",
    "mini-css-extract-plugin": "0.5.0",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "pnp-webpack-plugin": "1.2.1",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "7.0.1",
    "postcss-preset-env": "6.6.0",
    "postcss-safe-parser": "4.0.1",
    "react": "^16.8.6",
    "react-app-polyfill": "^1.0.1",
    "react-dev-utils": "^9.0.1",
    "react-dom": "^16.8.6",
    "react-keep-alive": "^2.4.2",
    "react-router-dom": "^5.0.1",
    "redell-ui": "^0.2.7",
    "resolve": "1.10.0",
    "sass-loader": "7.1.0",
    "semver": "6.0.0",
    "style-loader": "0.23.1",
    "terser-webpack-plugin": "1.2.3",
    "ts-pnp": "1.1.2",
    "typescript": "^3.4.3",
    "url-loader": "1.1.2",
    "use-react-router": "^1.0.7",
    "webpack": "4.29.6",
    "webpack-dev-server": "3.2.1",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "4.2.0"
  },
ShenChang618 commented 5 years ago

@GongJS OK,我看下

ShenChang618 commented 5 years ago

@GongJS 我这边测试了下,应该没有问题呀,能给我个 DEMO 吗?

theashbars commented 2 years ago

is there any solution?