React Native - экран входа в систему загружается дважды после выхода из системы - PullRequest
Новая
       21

React Native - экран входа в систему загружается дважды после выхода из системы

0 голосов
/ 02 октября 2018

Я создаю приложение React Native, которое также поддерживает Redux.Навигация обрабатывается реагировать-навигацией и проходит через один StackNavigator.

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

Однако на этом последнем экране у меня есть ссылка для выхода из системы, которая отправляет пользователя обратно на экран входа в систему, и экран входа в систему загружается дважды.Смотрите это видео:

enter image description here

Основная проблема заключается в том, что в StackNavigator все смонтированные компоненты остаются смонтированными, поэтому componentDidUpdate постоянно срабатывает во всехих.Важно отметить, что componentWillUnmount не запускает , но каждый раз, когда экран загружается или перезагружается, constructor и componentDidMount делают, поэтому управление componentDidUpdate становится действительно трудным, как я укажу ниже.

Я использую логическое значение isAuthenticated, сохраненное в хранилище Redux, чтобы определить, вошел ли пользователь в систему, и я перенаправляю на компонент Login, если это не так, например: 

componentDidUpdate() {
  if (this.props.login.toJS().isAuthenticated == false) {
    this.props.navigation.navigate('Login'));
  };
}

InТретий компонент, который я упоминал в своем первоначальном описании выше, - ссылка, по которой можно кликнуть, не ведет непосредственно к компоненту Login.Скорее, он вызывает действие, в результате которого isAuthenticated становится ложным, например: 

logout = () => {
    this.props.logoutUser(this.props.login);
};

Затем для фактического перенаправления используется componentDidUpdate.

Я пробовал отдельноиспользуя состояние currentScreen в хранилище Redux и локальное состояние shouldUpdate в каждом отдельном компоненте, чтобы управлять тем, componentDidUpdate что я действительно хочу делать.Посмотрите этот пример последнего ниже: 

componentDidUpdate() {
  if (this.state.shouldUpdate == true) {
    // Do something
  };
}

Я также попробовал подобную тактику, полагаясь на способность react-navigation отслеживать текущий экран в его состоянии, например: 

componentDidUpdate() {
  if (this.props.navigation.state.routeName == "SomeScreen") {
    // Do something
  };
}

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

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

Как мне остановить множественные загрузки предыдущих экранов в StackNavigator?Это на самом деле связано с беспорядком различных стрельб componentDidUpdate на заднем плане?Если так, как я должен управлять этим?Если нет, то какова вероятная причина?

...