Как исправить: «Ошибка: превышена максимальная глубина обновления» - PullRequest
Новая
       7

Как исправить: «Ошибка: превышена максимальная глубина обновления»

0 голосов
/ 03 апреля 2020

Я новичок в React. Возникли проблемы с реакции-маршрутизатором

Ошибка: превышена максимальная глубина обновления. Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate. React ограничивает количество вложенных обновлений для предотвращения бесконечных циклов.

Index.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>
  )
}

rout.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>
  )
}

Итак, проблема в том, что без точного маршрута у меня нет этой ошибки , но при передаче точного реквизита в PrivateRoute, мой компонент магазина не работает

1 Ответ

1 голос
/ 04 апреля 2020
  1. По существу, exact опора избавит от способности к вложению Route.

Например, ваш Main путь равен '/', поэтому, если вы передадите exact реквизит вот так: 

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

Тогда вы не можете иметь вложенный маршрут внутри Main, как /shop, хотя ваш компонент магазина вложен в Main.

Что касается бесконечной ошибки l oop, обычно это происходит из-за того, что мы изменяем свойства или состояния компонента внутри методов жизненного цикла (например: componentDidMount, componentDidUpdate для компонента на основе классов, useEffect ловушка для функциональный компонент)

Пожалуйста, убедитесь, что нет места, где вы изменяете реквизиты или состояния напрямую (без условий) внутри жизненного круга компонента. Например, использование setState непосредственно внутри componentDidUpdate приведет к бесконечному l oop.

...