在抽屉导航器中制作自定义抽屉时“超出最大更新深度”

Question

在获取自定义抽屉以定位我的堆栈屏幕时遇到此问题：超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 （我根本没有使用类组件，所以我不知道是什么原因造成的。）

主要组件：

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" })