登录并导航到新屏幕时，UI冻结。刷新应用程序后，屏幕即可工作。知道为什么吗？

Question

我已经构建了React Native应用程序并使用redux，并实现了React-Navigation。我遇到了几个问题，下面是其中一个可能同时解决这两个问题的问题。

我的屏幕流应该看起来像这样：

1. 登录（通过Facebook）
2. 仪表板（通过使用React-Navigation的自动重定向）

虽然此流程有效，但是我发现一旦我落在仪表板上，屏幕就会冻结。如果我重新启动应用程序，则该应用程序会按预期运行（即，它进行了Firebase调用来检索我的凭据，并自动从“登录”屏幕重定向到仪表板）。然后，仪表板接受所有触摸，并且用户界面工作正常。

有什么想法吗？我觉得问题出在我如何设置听众。我也已经实现了到redux的导航。我已经提取了下面的相关代码，但是您也可以在github链接中找到完整的代码。

.src / actions / actions.js

（github link: 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 / screens / 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 / screens / Dashboard.js

github link: 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

好的，我知道发生了什么事。我没有正确设置侦听器，因此一旦退出登录屏幕，便无法取消订阅。现在的代码如下所示：

src / screen / Login.js

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

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