从TabNavigator指向StackNavigator抛出最大更新深度超出错误

问题描述

在我的React Native应用中，我正在使用react-navigation的第5版和react-native-paper。

我试图在我的底部选项卡中找到一项来指向堆栈导航器。当我这样做时，出现以下错误：

已超过最大更新深度。组件调用时可能会发生这种情况 useEffect中的setState，但是useEffect要么没有 依赖项数组，或每个渲染上的依赖项更改之一。

如果我将标签项指向常规屏幕，则一切正常。根据{{​​1}}文档，我使用react-navigation中的BottomNavigation组件，而不是使用他们的制表符解决方案-https://reactnavigation.org/docs/material-bottom-tab-navigator/#using-with-react-native-paper-optional

这是我的标签页组件：

react-paper

这是我指向的堆栈导航器，它会导致错误：

import React from 'react';
import { BottomNavigation } from 'react-native-paper';

// Components
import CodeScanner from '../../../screens/vendors/CodeScannerScreen';
import Home from '../../../screens/home/HomeScreen';
import vendors from '../vendors/vendoRSStack';

// Stylesheet
import { styles } from './style-home-tabs';

const HoMetabs = (props) => {

   const [index,setIndex] = React.useState(0);
   
   // Routes
   const homeRoute = () => <Home />;
   const vendorsRoute = () => <vendors />;
   const scanRoute = () => <CodeScanner />;
   const [routes] = React.useState([
      { key: 'home',title: 'Home',icon: 'newspaper-variant-multiple' },{ key: 'vendors',title: 'vendors',icon: 'storefront' },{ key: 'codescanner',title: 'Scan',icon: 'qrcode-scan' }
   ]);

   const renderScene = BottomNavigation.SceneMap({
      home: homeRoute,vendors: vendorsRoute,codescanner: scanRoute
   });

   return (
      <BottomNavigation
         navigationState={{ index,routes }}
         onIndexChange={setIndex}
         renderScene={renderScene}
         labeled={false} />
   );
}

export default HoMetabs;

正如我所说，如果我要指向常规屏幕，一切正常。知道这里发生了什么以及如何解决吗？

解决方法

将路线声明移到组件外部可以解决此问题。每次安装组件时，它都会调用这些函数，从而导致了问题。

import React from 'react';
import { BottomNavigation } from 'react-native-paper';

// Components
import CodeScanner from '../../../screens/vendors/CodeScannerScreen';
import Home from '../../../screens/home/HomeScreen';
import Vendors from '../vendors/VendorsStack';

// Stylesheet
import { styles } from './style-home-tabs';
   
// Routes
const homeRoute = () => <Home />;
const vendorsRoute = () => <Vendors />;
const scanRoute = () => <CodeScanner />;

const HomeTabs = (props) => {

   const [index,setIndex] = React.useState(0);
   
   const [routes] = React.useState([
      { key: 'home',title: 'Home',icon: 'newspaper-variant-multiple' },{ key: 'vendors',title: 'Vendors',icon: 'storefront' },{ key: 'codescanner',title: 'Scan',icon: 'qrcode-scan' }
   ]);
   
   const renderScene = BottomNavigation.SceneMap({
      home: homeRoute,vendors: vendorsRoute,codescanner: scanRoute
   });

   return (
      <BottomNavigation
         navigationState={{ index,routes }}
         onIndexChange={setIndex}
         renderScene={renderScene}
         labeled={false} />
   );
}

export default HomeTabs;