Пользовательский интерфейс зависает при входе в систему и переходе на новый экран. Экран работает, как только я обновляю приложение. Есть идеи почему?

Question

Я создаю приложение React Native и использую Redux и внедрил React-Navigation. У меня есть пара вопросов, над которыми я работаю, и ниже приведен один из них, который может решить обе проблемы.

Мой поток экрана должен выглядеть следующим образом:

1. Войти (через Facebook)
2. Панель инструментов (через автоматическое перенаправление с использованием React-Navigation)

Пока этот поток работает, я обнаружил, что когда я приземляюсь на приборную панель, экран застывает. Если я перезапускаю приложение, оно работает как положено (то есть оно выполняет вызов firebase для получения моих учетных данных и автоматически перенаправляет с экрана входа в систему на панель инструментов). Панель инструментов принимает все касания, и пользовательский интерфейс работает нормально.

Есть идеи, что может происходить? Я чувствую, что проблема в том, как я настраиваю своих слушателей. Я также внедрил свою навигацию в Redux. Я вытащил соответствующий код ниже, но вы также можете найти полный код в ссылках github.

.src / действия / actions.js

( ссылка на github: actions.js )

// User Stuff
export const watchUserData = () => (
  (dispatch) => {
    currentUserListener((user) => {
      // if (user !== null) {
      if (user) {
        console.log('from action creator login: ' + user.displayName);
        dispatch(loadUser(user));
        dispatch(watchReminderData(user.uid));  //listener to pull reminder data
        dispatch(watchContactData(user.uid));  //listener to pull contact data
        dispatch(watchPermissions(user.uid));  //listener to pull notificationToken
      } else {
        console.log('from action creator: ' + user);
        dispatch(removeUser(user));
        dispatch(logOutUser(false));
        dispatch(NavigationActions.navigate({ routeName: 'Login' }));
      }
    });
  }
);

export const watchUserDataForLogin = () => (
  (dispatch) => {
    currentUserListener((user) => {
      if (!_.isEmpty(user)) {
        dispatch(loadUser(user));
        dispatch(setLoggedInUser(true));
        dispatch(NavigationActions.navigate({ routeName: 'Dashboard' }));
      }
    });
  }
);

.src / экраны / Login.js

github link: Login.js

  componentDidMount = () => {
    this.unsubscribeCurrentUserListener = currentUserListener((snapshot) => {
      try {
        this.props.watchUserDataForLogin();
      } catch (e) {
        this.setState({ error: e, });
      }
    });
  };

  componentWillUnmount = () => {
    if (this.unsubscribeCurrentUserListener) {
      this.unsubscribeCurrentUserListener();
    }
  };

.src / экраны / Dashboard.js

ссылка на github: Dashboard.js

  componentDidMount = () => {
    // Listener that loads the user, reminders, contacts, and notification data
    // this.unsubscribeCurrentUserListener = currentUserListener((snapshot) => {
    //   try {
    //     this.props.watchUserData();
    //   } catch (e) {
    //     this.setState({ error: e, });
    //   }
    // });
    this.unsubscribeCurrentUserListener = this.props.watchUserData();
  };

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

Answer 1

Хорошо, я понял, что происходит. Я неправильно настроил слушателя и поэтому не мог отписаться от него, как только покинул экран входа в систему. Код теперь выглядит так:

ЦСИ / экран / Login.js

  componentDidMount = () => {
    this.unsubscribeCurrentUserListener = this.props.watchUserDataForLogin();
  };

  componentWillUnmount = () => {
    if (this.unsubscribeCurrentUserListener) {
      this.unsubscribeCurrentUserListener();
    }
  };