React Navigations 5：超过最大更新深度

Posted 2023-02-22

【中文标题】React Navigations 5：超过最大更新深度

【英文标题】：React Navigations 5: Maximum update depth exceeded

【发布时间】：2020-11-27 19:30:24

【问题描述】：

我有一个 ShopNavigator.js 文件，用于处理我的所有导航：

import React from 'react';
import  NavigationContainer  from '@react-navigation/native';
import  createStackNavigator  from '@react-navigation/stack';
import  Platform  from 'react-native';

import ProductsOverviewScreen from '../screens/shop/ProductsOverviewScreen';
import ProductDetailScreen from '../screens/shop/ProductDetailScreen';
import CartScreen from '../screens/shop/CartScreen';
import  useSelector  from 'react-redux';

import Colors from '../constants/Colors';
import  HeaderButtons, Item  from 'react-navigation-header-buttons';
import HeaderButton from '../components/UI/HeaderButton';

const ProductsNavigator = createStackNavigator();

const ProductsNavMenu = () => 
    return (
        <NavigationContainer>
            <ProductsNavigator.Navigator
                screenOptions=
                    headerStyle: 
                        backgroundColor: Platform.OS === 'android' ? Colors.primary : ''
                    ,
                    headerTintColor: Platform.OS === 'android' ? 'white' : Colors.primary,
                    headerTitleStyle: 
                        fontSize: 17,
                        fontFamily: 'poppins-bold'
                    ,
                    headerBackTitleStyle: 
                        fontFamily: 'poppins-regular'
                    
                >
                <ProductsNavigator.Screen
                    name="Products"
                    component=ProductsOverviewScreen
                    options=( navigation ) => 
                     return 
                        headerRight: () => (
                            <HeaderButtons HeaderButtonComponent=HeaderButton>
                                <Item
                                    title="Cart"
                                    iconName=Platform.OS === 'android' ? 'md-cart' : 'ios-cart'
                                    onPress= navigation.navigate('Cart') 
                                />
                            </HeaderButtons>
                        )
                      ;
                    
                />
                <ProductsNavigator.Screen
                    name="ProductDetail"
                    component=ProductDetailScreen
                    options=( route ) => 
                        const productTitle = route.params.productTitle;
                        return 
                            title: productTitle
                        ;
                    
                />
                <ProductsNavigator.Screen
                    name="Cart"
                    component=CartScreen
                />
            </ProductsNavigator.Navigator>
        </NavigationContainer>
    );
;

export default ProductsNavMenu;

但具体来说，在我的 headerButton 上，我需要使用导航功能才能通过 Ionicons 进入我的购物车：

<ProductsNavigator.Screen
                    name="Products"
                    component=ProductsOverviewScreen
                    options=( navigation ) => 
                     return 
                        headerRight: () => (
                            <HeaderButtons HeaderButtonComponent=HeaderButton>
                                <Item
                                    title="Cart"
                                    iconName=Platform.OS === 'android' ? 'md-cart' : 'ios-cart'
                                    onPress= navigation.navigate('Cart') 
                                />
                            </HeaderButtons>
                        )
                      ;
                    
                />

如您所见，我使用navigation.navigate('Cart') 进入我的购物车。但不是去我的购物车，而是抛出一个错误：

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

This error is located at:
    in StackNavigator (at ShopNavigator.js:20)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:390)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:91)
    in ThemeProvider (at NavigationContainer.tsx:90)
    in ForwardRef(NavigationContainer) (at ShopNavigator.js:19)
    in ProductsNavMenu (at App.js:48)
    in Provider (at App.js:47)
    in App (created by ExpoRoot)
    in RNCAppearanceProvider (at src/index.tsx:70)
    in AppearanceProvider (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at AppContainer.js:109)
    in DevAppContainer (at AppContainer.js:124)
    in RCTView (at AppContainer.js:135)
    in AppContainer (at renderApplication.js:39)

我的购物车数量正在发送到我的ProductsOverviewScreen.js：

import React from 'react';
import  FlatList  from 'react-native';
import  useSelector, useDispatch  from 'react-redux';

import ProductItem from '../../components/shop/ProductItem';
// import all actions here
import * as cartActions from '../../store/actions/cart';


const ProductsOverviewScreeen = props => 
    // This data can be chop from reducers 
    const products = useSelector(state => state.products.availableProducts);
    
    // call the dispatch action:
    const dispatch = useDispatch();


    return <FlatList
        data=products
        keyExtractor=item => item.id
        renderItem=itemData => (
            <ProductItem
                image=itemData.item.imageUrl
                title=itemData.item.title
                price=itemData.item.price
                onViewDetail=() => 
                    // Go to product detail and pass the data of the item
                    props.navigation.navigate('ProductDetail',  productId: itemData.item.id, productTitle: itemData.item.title );
                 
                 // dispatch the action here
                onAddToCart=() =>  
                    dispatch(cartActions.addToCart(itemData.item));
                
            />
        )
    />;
;

export default ProductsOverviewScreeen;

知道我在这里做错了什么吗？请帮忙！

【参考方案1】：

<HeaderButtons HeaderButtonComponent=HeaderButton>
  <Item
    title="Cart"
    iconName=Platform.OS === 'android' ? 'md-cart' : 'ios-cart'
    onPress=() => navigation.navigate('Cart')
  />
</HeaderButtons>

【讨论】：

每当你得到这样的错误，这意味着你的组件正在创建一个无限循环。意味着你的组件正在一次又一次地重新渲染。在您的情况下，这是因为您的事件处理程序。