React Navigation 如何在这里渲染错误的屏幕？答案

【问题标题】：How is React Navigation rendering the wrong screen here?React Navigation 如何在这里渲染错误的屏幕？
【发布时间】：2021-06-12 06:10:03
【问题描述】：

我对使用 React Navigation 5 的超小型 React Native 应用程序中的这种奇怪行为感到困惑。我只有一个登录屏幕和一个带有主屏幕（以及几个占位符屏幕）的主选项卡导航器。成功登录后，我将用户令牌存储在 AsyncStorage 中（并在应用启动时自动恢复用户状态）。我在 App.js 中有一个减速器，用于处理登录/注销并在应用启动时恢复令牌。

App.js 的核心（遵循文档的建议：https://reactnavigation.org/docs/auth-flow）是 Stack.Navigator 元素：

<Stack.Navigator>
  {console.log(`>> App.js render switch, is isLoggedIn true? >>> ${state.isLoggedIn}`)}
  {state.isLoggedIn ? (
    <Stack.Screen  name="Main" component={MainTabNavigator} options={{ headerShown: false }} />
  ) : (
    <Stack.Screen name="Login" component={LoginScreen} />
  )}
</Stack.Navigator>

这是一个奇怪的问题：登录成功后，登录屏幕逻辑会调用一个通过 React Context 传递的函数来触发 reducer 的“signin”分支。它存储令牌并将 isLoggedIn 布尔值设置为 true。应该导致上述三元组采用第一个分支并呈现 MainTabNavigator。相反，它会渲染已包含用户数据的 LoginScreen，因此它会再次调用 reducer 并导致 App.js 重新渲染。 isLoggedIn 布尔值仍然为真，因此理论上它再次在这里采用第一个分支。它进入一个重新渲染循环，直到 React 杀死它。

结果是console.log 说isLoggedIn 为true，但随后它执行了false 分支！但是，我已经逐步了解了它，它是实际上采用了真正的分支，但不知何故，它没有呈现 MainTabNavigator，而是呈现了 LoginScreen。请注意，在我清除错误并导致应用重新加载后，“恢复令牌”逻辑工作正常并且 MainTabNavigator 呈现。

任何人都知道为什么我的应用程序在应该呈现 MainTabNavigator 的行上呈现登录屏幕？

哦，还请注意，我在调用通过 React Context 传递的 setAuth 函数时收到此警告：Warning: Cannot update a component from inside the function body of a different component. 不确定这是否解释了任何事情。我仍在试图弄清楚如何修复它......以及如何在我的 Auth Context 中正确设置状态。

【问题讨论】：

我将大部分 App.js、LoginScreen.js 和 MainTabNavigator.js 放在一个要点中：gist.github.com/yukster/d79051380f540f523d71573291b87c13

标签： javascript reactjs react-native react-navigation-v5

【解决方案1】：

React Native Slack 频道中的一位乐于助人的人建议我使用 Apollo 的 useMutation 提供的 onCompleted 回调选项，而不是检查 if 块（在登录屏幕中）中的 data。所以我只是将在if 中完成的工作转移到作为onCompleted 传递的函数中，它工作得很好。没有警告，没有无限循环。

我认为 Apollo 返回的 data 变量以某种方式变得足够真实，足以使 if 成功，但现在传递令牌并导致应用程序重新渲染还为时过早。它绝对处于一种非常奇怪的状态。我从未见过如此令人困惑的错误！

【讨论】：