如何修复:“错误:超过最大更新深度”

Question

我是新来的。反应路由器有问题

错误：超过了最大更新深度。当组件重复调用组件内部的setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环。

索引.tsx

          <PrivateRoute path='/' component={Main} /> //without exact
          <Route path='/signin' component={SignIn} />

PrivateRoute.tsx:

export const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      localStorage.getItem('authToken') ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{ pathname: '/signin', state: { from: props.location } }}
        />
      )
    }
  />
)

Main.tsx

const Main: FC = () => {
  return (
    <App>
      <Switch>
        {routes.map(route => (
          <Route
            key={route.path}
            path={route.path}
            exact={route.exact}
            component={route.component}
          />
        ))}
      </Switch>
    </App>
  )
}

routes.tsx：

export const routes = [
  {
    path: '/shop',
    key: 'market',
    component: props => (
      <LazyLoad
        component={React.lazy(() => import('./modules/shop/pages/Shop'))}
        {...props}
      />
    ),
  },
  {
    path: '/',
    exact: true,
    component: () => <div>main</div>,
    skip: true,
  },
]

App.tsx：

const App: FC<AppProps> = ({ children }) => {
  const classes = useStyles()
  const sidebarToggle = useState(false) // recommended: collapsed, setCollapsed
  return (
    <div className={classes.wrapper}>
      <SidebarContext.Provider value={sidebarToggle}>
        <Sidebar />
        <main className={classes.main}>
          <section className={classes.routeWrapper}>
            <Nav />
            <div className={classes.route}>{children}</div>
          </section>
        </main>
      </SidebarContext.Provider>
    </div>
  )
}

所以，问题是：如果没有确切的路线，我就没有这个错误，但是当将确切的道具传递给Private ateRoute时，我的商店组件就不起作用了。

Answer 1

1. 基本上，exactprop将消除Route的嵌套功能

例如，您的主路径是“/”，因此，如果您像这样传递确切的道具：

<PrivateRoute exact path='/' component={Main} />

然后，您不能在Main中嵌套路由，例如/shop，尽管您的shop组件嵌套在Main中。

请确保在组件的生命圈内没有直接（无条件）改变道具或状态的位置。例如，直接在组件中使用 setStateDid更新将导致无限循环。