Ошибка отображения условия в приложении React Native Redux - PullRequest
Новая
       110

Ошибка отображения условия в приложении React Native Redux

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

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

let isLoggedIn = false;

export default function App() {
  console.log('App executing...');
  console.log('isLoggedIn: ', isLoggedIn);
  return (
    <Provider store={store}>
      <NavigationContainer>
        {isLoggedIn ? ContactsTab() : Login()}
      </NavigationContainer>
    </Provider>
  );
}

store.subscribe(() => {
  // Set isLoggedIn to true if token is received and reinvoke App()
  if (store.getState().user.token) {
    isLoggedIn = true;
    App();
  }
});

Приложение запускается с ведения журнала консоли isLoggedIn: false и отображение Login () (как и ожидалось). Когда я вхожу в свой телефон с использованием правильных учетных данных, App () повторно вызывается для ведения журнала консоли isLoggedIn: true (как и ожидалось), но он по-прежнему отображает Login () . Если я установлю isLoggedIn = true внутри функции приложения, приложение успешно начнет отображать ContactsTab () .

Что здесь происходит? Почему мое приложение не перемещается в ContactsTab () , когда значение isLoggedIn успешно меняется на true ? Как я могу это исправить?

Спасибо, что читаете вместе. Последние два дня я пытался отлаживать это безуспешно, поэтому любая помощь будет принята с благодарностью!

Ответы [ 2 ]

1 голос
/ 24 апреля 2020

Вам нужно использовать useState, вот так, useState будет автоматически отображаться при изменении состояния 

export default function App() {
  const [isLoggedIn, setLoggedIn] = useState(false);
  console.log('App Executing...');
  console.log('isLoggedIn: ', isLoggedIn);
  store.subscribe(() => {
    // Set isLoggedIn to true if token is received and reinvoke App()
    if (store.getState().user.token) {
      setLoggedIn(true);
    }
  });
  return (
    <Provider store={store}>
      <NavigationContainer>
        {isLoggedIn ? ContactsTab() : Login()}
      </NavigationContainer>
    </Provider>
  );
}

Надеюсь, это поможет!

1 голос
/ 24 апреля 2020

Что здесь происходит? Почему мое приложение не перемещается в ContactsTab (), когда значение isLoggedIn успешно меняется на true? Как я могу это исправить?

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

Подробнее о состоянии здесь . Узнайте больше о том, как вы можете использовать redux, чтобы ваши компоненты слушали изменения в состоянии вашего приложения здесь .

...