使用 React.lazy 和 Suspense 进行代码拆分时无法在未安装的组件上找到节点

Question

我已经使用 React.lazy 和 Suspense 添加了代码拆分，在添加它们之后，它会按预期呈现组件，但是当我从一个组件导航到另一个组件时，它会引发错误

无法在未安装的组件上找到节点。

    import React, { Component, Suspense, lazy } from 'react'
    import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
    import { Provider } from 'react-redux'
    import createStore from './store'
    import Loading from './components/loading'

        const NavigationBar = lazy(() => import('./containers/NavigationBar'))
        const AdminContainer = lazy(() => import('./containers/Admin'))
        const OrgSelection = lazy(() => import('./containers/OrgSelection'))
        const TemplateLibrary = lazy(() => import('./containers/TemplateLibrary'))
        const SearchContainer = lazy(() => import('./containers/SearchContainer'))
        const Login = lazy(() => import('./containers/Login'))
        const Processes = lazy(() => import('./containers/Processes'))
        const CompanyDashboard = lazy(() => import('./containers/CompanyDashboard'))
        const ProcessDashboard = lazy(() => import('./containers/ProcessDashboard'))
        const GlobalTemplateLibrary = lazy(() =>
          import('./containers/GlobalTemplateLibrary')
        )
        const ConcentContainer = lazy(() => import('./containers/Concent'))
        const ChecklistDetails = lazy(() => import('./containers/ChecklistDetails'))
        const PrivacyPolicy = lazy(() => import('./containers/PrivacyPolicy'))
        const TemplateDashboard = lazy(() => import('./containers/TemplateDashboard'))
        const TemplateCreation = lazy(() => import('./containers/TemplateCreation'))
        const ProcessCreation = lazy(() => import('./containers/ProcessCreation'))
        const ProcessRoleCreation = lazy(() =>
          import('./containers/ProcessRoleCreation')
        )
        const Checklist = lazy(() => import('./containers/Checklist'))
        const Test = lazy(() => import('./containers/Test'))

    class App extends Component {
      render() {
        return (
          <Provider store={store}>
            <Router>
               <Suspense fallback={<Loading />}>
              <Switch>
                <Route exact path="/" component={Login} />
                <Route exact path="/organizations" component={OrgSelection} />
                <NavigationBar>
                  <Route exact path="/admin" component={AdminContainer} />
                  <Route exact path="/process" component={Processes} />
                  <Route exact path="/templates" component={TemplateLibrary} />
                  <Route exact path="/search" component={SearchContainer} />
                  <Route exact path="/library" component={GlobalTemplateLibrary} />
                  <Route exact path="/privacypolicy" component={PrivacyPolicy} />
                  <Route exact path="/concent" component={ConcentContainer} />
                  <Route exact path="/checklist" component={Checklist} />
                  <Route exact path="/test" component={Test} />
                  <Route exact path="/checklist/:id" component={Checklist} />
                  <Route
                    exact
                    path="/checklist/details/:id"
                    component={ChecklistDetails}
                  />
                  <Route
                    exact
                    path="/processDashboard"
                    component={ProcessDashboard}
                  />
                  <Route
                    exact
                    path="/companyDashboard"
                    component={CompanyDashboard}
                  />
                  <Route
                    exact
                    path="/templateDashboard"
                    component={TemplateDashboard}
                  />
                  <Route exact path="/createProcess" component={ProcessCreation} />
                  <Route exact path="/viewsRoles" component={ProcessRoleCreation} />
                  <Route exact path="/template" component={TemplateCreation} />
                </NavigationBar>
              </Switch>
              </Suspense> 
            </Router>
          </Provider>
        )
      }
    }
    export default App

当我删除代码 Suspense 和惰性选项时，错误消失了。知道为什么我会得到这个吗？。

Answer 1

这个问题是由于使用 findDOMNode 包裹在 suspense 中的组件造成的。这在React 16.9.0 中得到了修复

Answer 2

通常该错误是指事件侦听器，这些侦听器绑定到未在componentWillUnmount上移除的节点。检查您的组件以找出问题所在。