如何使用 React Native 和 React Navigation 处理屏幕转换期间的状态答案

【问题标题】：How to deal with state during a screen transition using react native and react navigation如何使用 React Native 和 React Navigation 处理屏幕转换期间的状态
【发布时间】：2018-10-10 01:00:05
【问题描述】：

在从一个屏幕转换到另一个屏幕期间，我遇到了一个对象未定义异常。我很清楚发生了什么，我只是不确定是否有一种干净的方法来处理它，而不仅仅是检查 undefined 无处不在。

这是我的场景：

源屏幕引用 Redux 存储中的用户对象
从源屏幕开始导航到目标屏幕。
目标屏幕 componentDidMount() 被调用，我从 Redux 存储中清除用户对象。
再次调用源屏幕 render() 并出现未定义的错误，因为我从商店中清除了用户。

我假设源屏幕和目标屏幕由于过渡而有一些重叠。我试过添加没有运气的听众。我只能让侦听器处理程序触发 type = action，

我可能让这件事变得比现在更复杂，但我想知道是否有处理这个问题的标准方法，或者我是否以完全错误的方式处理它。

此外，我的 react-navigation 已根据 React Navigation 网站上的说明和 Redux React Navigation 示例代码与 Redux 集成。

这是基本代码。

屏幕 1

componentDidMount() {
  // This is a Redux action that sets an object called user to null
  clearUser();
{

屏幕 2

render() {
  return (
    // Other code here
    // user is null here because render gets called after Screen1#componentDidMount() gets called
    <Text>{user.firstName + ' ' + user.lastName}</Text>
    <TouchableOpacity
      onPress={() => navigation.dispatch({ type:'NAV_SCREEN_1' })}
    >
      // button code here
    </TouchableOpacity>
    // Other code here
  )
}

错误类型是“TypeError: Cannot read property 'firstName' of null”

我了解该错误以及我收到此错误的原因。用户对象已被我在屏幕 1 的 componentDidMount() 中的 Redux 操作设置为 null，然后 Redux 导致屏幕 2 的渲染被调用，它引用了一个为 null 的用户对象。

我的问题是，有没有一种特殊的方法来适应这种行为，而不必在我需要使用它的每个地方检查用户对象是否为空？我应该在其他地方调用 clearUser() 吗？

【问题讨论】：

有太多不同的事情可能发生，任何人都无法猜测。如果您需要帮助，请发布示例代码，这是重现问题所需的最少代码以及具体的错误消息。
@stone 我已经编辑了我的问题。
这可能会对您有所帮助：stackoverflow.com/questions/50027713/…。利用模糊和焦点事件来触发你的函数
@ThoVu 我正在使用尚未实现 addListener 的旧版本的 react-navigation。我将通过并尝试将我的所有包更新到可能的最新版本，看看我是否可以访问 addListener 并尝试一下。 - 谢谢
@ThoVu 将您的评论作为答案，以便我将其标记为正确。

标签： react-native redux react-redux react-navigation

【解决方案1】：

对于最新版本的react-navigation，您可以使用addListener、withNavigationFocus 或isFocused 来检测屏幕的过渡状态。

另一种非官方的方法是捕获动作类型NavigationActions.COMPLETE_TRANSITION，以防使用像redux-saga 这样的中间件。

【讨论】：

谢谢@ThoVu 这样做很有意义。我正在导航到的屏幕是登录屏幕。等到它完全聚焦然后删除用户。

【解决方案2】：

作为替代方案，您可以简单地让 Redux 连接的屏幕处理未定义或 null 状态。我遇到了类似的问题，当用户状态未定义时，我最终渲染了加载程序而不是屏幕内容。当我注销时，屏幕会在几分之一秒内显示加载程序，然后应用程序会导航离开。

【讨论】：