Почему изменение состояния в App.js вызывает перемонтирование компонента?

В файле App.js я выполняю маршрутизацию (для маршрутизации я использую react-routesv4). С маршрутами также есть боковая панель. Причина боковой панели У меня есть состояние, которое контролирует эту боковую панель. Всякий раз, когда состояние боковой панели изменяется, другой компонент, связанный с текущим маршрутом, перемонтируется.

Например, здесь у меня есть компонент User, который перемонтируется каждый раз, когда изменяется состояние боковой панели. А в компоненте «Пользователь» я извлекаю данные с помощью хука useEffects, поэтому каждое изменение состояния боковой панели также запускает этот хук.

const App = ({classes}) => {

    const [isDrawerOpen, setIsDrawerOpen] = useState(false);

    const handleDrawerToggle = () => {
        setIsDrawerOpen(!isDrawerOpen)
    };

    return (
        <BrowserRouter>

            <CssBaseline/>

            <Switch>

               <Route path = {'/login'} component = {Login}/>

               <Fragment>
                  <Sidebar isDrawerOpen = {isDrawerOpen} toggleDrawer = {handleDrawerToggle}/>
                  <main role = "main" className = {classes.content}>
                      <Switch>
                          <Route exact path='/' component = {User(Dashboard)}/>
                          <Route path='/users' component = {Admin(Users)}/>
                      </Switch>
                  </main>
              </Fragment>

          </Switch>

      </BrowserRouter>
   );
};

export default withStyles(styles)(App);

const Authorization = (allowedRoles) => (WrappedComponent) => {
 const WithAuthorization = (props) => {

     const role = helpers.getRole();

     if (role === null){
         return <Redirect to = {{ pathname: '/login', state: { from: props.location } }} />
     } else if (allowedRoles.includes(role)) {
         return <WrappedComponent {...props} />
     } else {
         return <Typography>You don't have access</Typography>
     }

   };

    return WithAuthorization;
};

export default Authorization;

Не знаете, чем вызвано такое поведение?

Это настоящий код или у вас есть HoC на некоторых маршрутах?

Mosè Raguzzini 08.07.2019 17:01

У меня есть авторизация Hoc, которая оборачивает каждый компонент, который необходимо отобразить, и теперь, когда вы сказали, что я удалил его, и теперь изменение состояния боковой панели не перемонтирует компонент (я отредактировал вопрос)

bobby 08.07.2019 17:08
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
142
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это связано с тем, что HoC оценивается при каждом рендеринге. Пытаться:

const AuthorisedComponent = requireLogin(MyComponent); // instantiate hoc once

<Route path = "/mycomponent" component = {AuthorisedComponent} /> // use hoc

он все еще перемонтирует компонент

bobby 08.07.2019 17:50

Это все еще должно быть из-за некоторых HoC, можете ли вы опубликовать обновленный код? Важно, чтобы вы поместили объявление const вне рендера.

Mosè Raguzzini 08.07.2019 18:03

Другие вопросы по теме