«Превышена максимальная глубина обновления» при создании пользовательского ящика в Drawer Navigator

Question

Возникла проблема с получением настраиваемого ящика для таргетинга на мои экраны стека: превышена максимальная глубина обновления. Это может произойти, когда компонент многократно вызывает setState внутри componentWillUpdate или componentDidUpdate. (Я вообще не использую компоненты класса, поэтому не знаю, чем это вызвано.)

Главный компонент:

import "react-native-gesture-handler";
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createDrawerNavigator } from "@react-navigation/drawer";
import Header from "./components/Header";
import NavigationDrawer from "./components/NavigationDrawer";
import Home from "./components/Home";
import Login from "./components/Login";
import Signup from "./components/Signup";
import GameNotes from "./components/GameNotes";
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
function StackNavigator() {
    return (
        <Stack.Navigator initialRouteName="Main" screenOptions={{ header: Header }}>
            <Stack.Screen name="Main" component={Home} />
            <Stack.Screen name="Login" component={Login} />
            <Stack.Screen name="Signup" component={Signup} />
        </Stack.Navigator>
    );
}
export default function ComponentContainer() {
    return (
        <NavigationContainer>
            <Drawer.Navigator
                initialRouteName="Stack"
                drawerContent={(props) => <NavigationDrawer {...props} />}
            >
                <Drawer.Screen name="Stack" component={StackNavigator} />
                <Drawer.Screen name="GameNotes" component={GameNotes} />
            </Drawer.Navigator>
        </NavigationContainer>
    );
}

Компонент NavigationDrawer:

import React, { useContext } from "react";
import { DrawerContentScrollView, DrawerItem } from "@react-navigation/drawer";
import { UserContext } from "../contexts/UserContext";
import { LanguageContext } from "../contexts/LanguageContext";
import localeSelect from "../services/localeSelect";
import { login } from "../data/locales";

export default function NavigationDrawer({ navigation }) {
    const { user } = useContext(UserContext);
    const { language } = useContext(LanguageContext);
    return (
        <DrawerContentScrollView>
            {!user && (
                <>
                    <DrawerItem
                        label={localeSelect(language, login)}
                        onPress={navigation.navigate("Stack", { screen: "Login" })}
                    />
                </>
            )}
        </DrawerContentScrollView>
    );
}

Answer 1

Измените это: navigation.navigate("Stack", { screen: "Login" })

Кому: () => navigation.navigate("Stack", { screen: "Login" })