React не устанавливает состояние после завершения топора ios

Question

Я пишу код на стороне клиента для аутентификации с помощью React и response-router. В приведенном ниже коде я хочу проверить токен jwt на сервере. После этого я получу response.data.access с сервера и хочу установить для него переменную access на клиенте. Но, похоже, он передает false защищенному маршруту, даже если он регистрирует true в консоли. Как правильно установить access? Я предполагаю, что проблема в асинхронном коде, и функция setAccess вызывается без ожидания извлечения ax ios.

// imports

function App() {

  const [access, setAccess] = useState(false);

  useEffect(() => {
    fetch();
  }, [access]);

  const fetch = async () => 
    await axios.get('http://localhost:7000/user/check-token')
      .then(response => {
        // response.data.access is a boolean variable coming from server
        console.log(response.data.access)
        setAccess(response.data.access);
      });

  return (
    <Router>
      <Switch>

        // other routes

        <Protected path='/user/dashboard' access={access}>
          <Dashboard userData={userData} />
        </Protected>

      </Switch>
    </Router>
  );
}

export default App;

Вот защищенный маршрут

 const Protected = ({ children, access, ...rest }) => {

    return (
      <div>
        <Route {...rest} render={(props) => (
          access === true
            ? children
            : <Redirect to={{
                pathname: '/user/login',
                state: { from: props.location }
              }} />
        )} />
      </div>

    );
  }

Не могли бы вы объясните пожалуйста что происходит и что мне делать?

Answer 1

Я решил эту проблему. Ну, я просто добавил экран загрузки, чтобы подождать некоторое время, пока идет загрузка данных, и это решило мою проблему.

const Protected = ({ children, access, ...rest }) => {


    return (
      <div>
        <Route {...rest} render={(props) => {
         if (access === null) {  // if access is null, the data is still being fetched
          return <h1>Loading...</h1>  // display loading hardcoded loading screen while it's not fetched
         } else {
          if (access === true) {
            return children
          } else {
            return <Redirect to={{
              pathname: '/user/login',
              state: { from: props.location }
            }} />
          }

         }

        }} />
      </div>

    );
  }