在抽屉导航器中制作自定义抽屉时"Maximum update depth exceeded"

Question

获取自定义抽屉以针对我的Stack屏幕时出现此问题：超过了最大更新深度。当组件在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" })