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和lazy选项时，错误消失了。我为什么要得到这个的任何想法吗？。

Answer 1

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

Answer 2

此问题是由于将 findDOMNode 用于包裹在悬念中的组件引起的。此问题已在React 16.9.0

中修复

使用React.lazy和Suspense进行代码拆分时，无法在已卸载组件上找到节点

2 个答案: