Question

在从一个屏幕转换到另一个屏幕期间，我收到一个对象未定义的异常。我非常清楚发生了什么，我只是不确定是否有一种干净的方式来处理它而不需要检查未定义的任何地方。

以下是我的情景：

源屏幕引用Redux商店中的用户对象
从源屏幕启动导航到目标屏幕。
调用目标屏幕componentDidMount（），我从Redux商店清除用户对象。
再次调用源屏幕render（）并发生未定义的错误，因为我从商店中清除了用户。

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

我可能会让它变得比这更复杂，但我想知道是否有一种标准的处理方法，或者我是否以完全错误的方式处理它。

此外，我的反应导航已根据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：无法读取属性'firstName'为null”

我理解错误以及我为什么会这样做。我的Redux操作在屏幕1的componentDidMount（）中将用户对象设置为null，然后Redux导致调用屏幕2的渲染，这将引用一个为null的用户对象。

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

Answer 1

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

另一种非正式方法是在使用NavigationActions.COMPLETE_TRANSITION等中间件的情况下捕获操作类型redux-saga。

Answer 2

或者，您可以简单地使连接Redux的屏幕句柄处于未定义或空状态。我有一个类似的问题，当用户状态未定义时，我最终渲染了加载器而不是屏幕内容。当我注销时，屏幕上会显示一秒钟的装载程序，然后应用程序便会离开。

如何在屏幕转换期间使用react native和react navigation处理状态

2 个答案: