React (Native) Context API 导致 Stack Navigator (React Navigation 5) 在状态更新后重新渲染

Posted 2023-04-14

技术标签:

【中文标题】React (Native) Context API 导致 Stack Navigator (React Navigation 5) 在状态更新后重新渲染【英文标题】：React (Native) Context API Causes Stack Navigator (React Navigation 5) to re-render after state update 【发布时间】：2020-11-21 14:05:01 【问题描述】：

提前感谢您帮助解决这个问题。

一些上下文（没有双关语）

我正在从事一家公司的项目，该项目将限制我将所有代码放在这里，但我会尝试在不泄露国家机密的情况下尽可能多地放上相关代码。

基本上，React Native 应用程序使用的是 React Navigation v5，我已经尝试解决这个问题两天了。我明白发生了什么，但我不明白为什么会发生或如何解决它。

在应用程序代码的某处，您有以下代码。

export const Lounge = function Lounge(props: navigation: any) 
  
  const navigation: setOptions = props
  const bottomTabBarCtx = useContext(BottomTabBarContext)

  // const [routeName, setRouteName] = useState("LoungeList")

  useEffect(() => 
    setOptions(tabBarVisible: bottomTabBarCtx.isVisible)
  , [bottomTabBarCtx.isVisible, setOptions])

  return <Stack.Navigator initialRouteName="LoungeList">
    <Stack.Screen
      name="LoungeList"
      component=List
      options=headerShown: false
    />

    <Stack.Screen
      name="LoungeDetails"
      component=Details
      options=
        headerLeft : buttonProps => <BackButton ...buttonProps />,
        headerRight: buttonProps => <LoungeHeaderRightDetailsButton ...buttonProps />,
        headerTitle: 'Lounge Details',
      
    />

    <Stack.Screen
      name="LoungeParticipants"
      component=Participants

      options=
        headerLeft : buttonProps => <BackButton ...buttonProps />,
        headerRight: buttonProps => <LoungeHeaderRightDetailsButton ...buttonProps />,
        headerTitle: 'Lounge Participants',
      
    />

    <Stack.Screen
      name="LoungeAdd"
      component=LoungeEdit

      options=
        headerLeft : buttonProps => <BackButton ...buttonProps />,
        headerTitle: 'Create Lounge',
      
    />

    <Stack.Screen
      name="LoungeEdit"
      component=LoungeEdit

      options=
        headerLeft : buttonProps => <BackButton ...buttonProps />,
        headerTitle: 'Edit Lounge',
      
    />

...

上面的文件只是定义了可以在应用程序的这个部分导航到的路线。

初始屏幕/路线名称 = 'LoungeList'

一切正常。

在 LoungeList 屏幕上，我点击了一个休息室摘要单元格（请发挥你的想象力），然后点击将我带到下面的屏幕：LoungeDetails

在 LoungeDetails 屏幕中，我看到了休息室的详细信息，并且在该屏幕上，还有一个 加入按钮。这个按钮可以让我加入休息室。

功能应该是，当用户点击加入按钮时，按钮进入加载状态，当它完成加载时，它应该显示为Joined。发生这种情况应该但是在发生这种情况后立即我被导航到 LoungeList 屏幕

以下是我为加入休息室而执行的代码：

const userDidJoinLounge = (joinedLounge: LoungeWithUsers) => 

    if(joinedLounge)

      console.log("joinedLounge before update == ", joinedLounge);
      
      const allLoungesNew = LoungeController.replaceLoungeInLoungeArray(
        userCtx.allLoungesList,
        joinedLounge
      );

      const userLoungesNew = LoungeController.getUserJoinedLoungeArrayListOnJoin(
        allLoungesNew,
        userCtx.userLoungeList,
        joinedLounge
      );

      console.log("allLounges after update == ", allLoungesNew);
      console.log("joinedLounges after update == ", userLoungesNew);

      userCtx.updateLoungeLists(allLoungesNew, userLoungesNew)

在上面的函数中，一行

userCtx.updateLoungeLists(allLoungesNew, userLoungesNew) 接受两个参数，一个应用程序上所有休息室的列表，一个用户加入的休息室列表。此函数更新包含这两个值的上下文。

大问题

问题：我不断被重定向到 LoungeList 屏幕，即使没有任何代码指示应用这样做。

可能有帮助的事情

我玩过很多事情，其中一些可能有助于您弄清楚发生了什么的事情是：

React Navigation 路由配置似乎正在重新渲染。我这样说是因为当我将 initialRouteName 更改为 LoungeDetails 时，休息室详情屏幕（加入按钮所在的位置）会闪烁，但它会停留在同一屏幕上。这也告诉我，在该函数结束时，堆栈导航器会退回到 initialRouteName 是什么。

奇怪的是，当我只设置 allLoungesNew 时，应用程序不会导航到 initialRouteName，似乎只有当我在 userContext 的状态下设置 userLoungesNew 时才会出现此问题。