탐색 5 대응: 최대 업데이트 깊이가 초과됨

탐색 5 대응: 최대 업데이트 깊이가 초과됨

나는 a를 가지고 있다.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;

그러나 특히, 내 머리글에 단추, 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;

내가 여기서 뭘 잘못하고 있는지 알기나 해?도와주세요!

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

참조URL: https://stackoverflow.com/questions/63302160/react-navigations-5-maximum-update-depth-exceeded