useEffect оптимизировать, но не удается выполнить повторную визуализацию после изменения переданного массива

Question

Итак, у меня есть компонент Loader, который выбирает данные с сервера и решает, куда их перенаправить / перенаправить, основываясь на ответе.

loader.tsx

export const Loader = observer(({ children }: CorrectlyTyped) => {
  const history = useHistory();
  const location = useLocation();
  const [loaded, setLoaded] = React.useState(false);
  useEffect(() => {
    api.fetch(globalStore).then((response) => {
      setLoaded(true);
      if (response.autheticated) {
        history.replace('/authenticated-page');
      } else {
        history.push('/unauth-page');
      }
    });
  }, [globalStore]);

  loader = (
    <AnimatedStuff/>
  );

  return (
    <>
      {loaded ? children : loader}
    </>
  );
});

app.tsx

<Router>
  <Switch>
    <Loader>
      <Route path={SomePath1} component={SomeComponent1}/>
      <Route path={SomePath2} component={SomeComponent2}/>
      <Route path={SomePath3} component={SomeComponent3}/>
      // ...and so on
    <Loader/>
  <Switch/>
<Router/>   

в исходном состоянии globalStore имеет свойства, которые являются нулевыми или неопределенными. Однако после получения ответа эти свойства заполняются значениями. Однако эффект не применяется. (например, когда пользователь входит в систему, пользователь будет перенаправлен на /authenticated-page, даже если пользователь щелкнет спину браузера, и все равно будет перенаправлен на /authenticated-page, та же идея с выходом из системы). Или, возможно, я помещаю неправильное значение во второй аргумент массива useEffect.

В ретроспективе создание response в качестве массива зависимостей для useEffect - это путь к go, но, похоже, это не так. Работа как response используется специально внутри then. помощь.

Answer 1

Если globalStore является объектом, попробуйте инициализировать его как globalStore = {};