Можно ли очистить переменную useState после ее использования? - PullRequest
Новая
       8

Можно ли очистить переменную useState после ее использования?

0 голосов
/ 16 октября 2019

У меня есть собственный маршрут, похожий на этот: 

import React from 'react';
import { Route } from 'react-router-dom';

import { AuthenticationContext } from '../../contexts/authentication/context';

import Unauthorized from '../Unauthorized';

import axios from 'axios';

const ProtectedRoute = ({ component: Component, redirect: Redirect, contextProvider: ContextProvider, path, ...routeProps }) => {

  const { authenticationState: {isAuthenticated, isFetchingTheUser, currentUser} } = React.useContext(AuthenticationContext)

  const [authorized, setAuthorized] = React.useState([]);
  const [isFetchingAuthorizations, setIsFetchingAuthorizations] = React.useState(false);

  React.useEffect(() => {
    console.log("useEffect from protected route")

    setIsFetchingAuthorizations(true);
    axios.get(`${global.REST_API_ADDR}/api/pages/${encodeURIComponent(path)}`)
    .then((response) => {
      setAuthorized(response.data.authorized);
      setIsFetchingAuthorizations(false);
    })
    .catch((error) => {
      setIsFetchingAuthorizations(false);

      // console.log("Protected route use Effect error : ", error);
    })
  }, [path])


  return (
    <Route {...routeProps}
      render={ props => {

        if(isFetchingTheUser || isFetchingAuthorizations) return <div>Chargement...</div>
        console.log("authorized =", authorized)
        console.log("current user rank = ", currentUser.rank)
        if(isAuthenticated && authorized.includes(currentUser.rank)){
          console.log("does it trigger ???")
          return ContextProvider ? <ContextProvider><Component {...props} /></ContextProvider> : <Component {...props} />
        }else if(isAuthenticated && !authorized.includes(currentUser.rank)) {
          return <Unauthorized {...props} />;
        }
        else{
          return <Redirect {...props}/>;
        }
    }}/>
  );

};

export default ProtectedRoute;

И мне интересно, возможно ли сбросить «авторизованное» состояние после того, как маршрут использовал его для возврата компонента? Я хочу сделать это, потому что каждый раз, когда мой пользователь переходит на другую страницу, он загружает предыдущий «авторизованный» массив и запускает его, если оператор 

if(isAuthenticated && authorized.includes(currentUser.rank)){
          console.log("does it trigger ???")
          return ContextProvider ? <ContextProvider><Component {...props} /></ContextProvider> : <Component {...props} />
        }

вызывает реакцию, выдавая предупреждение за попытку рендеринга несмонтированногокомпонент ...

Итак, возможно ли сбросить «разрешенный» массив в пустой массив после использования?

Заранее спасибо

РЕДАКТИРОВАТЬ 1: Кажется, чтопри использовании маршрута или пользовательского маршрута в (экспресс-переключении маршрутов) он не перемонтирует компонент, а использует его повторно. Если вы добавляете разные ключи к каждому дочернему элементу этого экспресс-переключателя, он работает нормально, но есть ли лучшее решение? Должен ли я обрабатывать свои разрешения по-другому? Любой совет ценится

работает: 

<Switch>
    <ProtectedRoute key="2" path='/nonconformities' component={ReworkManager} redirect={UserLoginForm} contextProvider={ReworkManagerContextProvider} />
    <ProtectedRoute key="1" path='/protected' component={Protected} redirect={UserLoginForm} contextProvider={ReworkVisualizerContextProvider} />
</Switch>

не работает: 

<Switch>
    <ProtectedRoute path='/nonconformities' component={ReworkManager} redirect={UserLoginForm} contextProvider={ReworkManagerContextProvider} />
    <ProtectedRoute path='/protected' component={Protected} redirect={UserLoginForm} contextProvider={ReworkVisualizerContextProvider} />
</Switch>
...