在 React Navigation 中将参数传递到另一个屏幕时出现“未定义”错误
2021-09-20
1042
我有 2 个屏幕,EditProfile 和 Profile。我试图将编辑的名称和日期从 EditProfile 传递到 Profile。它们都堆叠在 ProfileNavigator 中,Profile 是出现的第一个屏幕,从那里,用户可以点击编辑个人资料按钮并导航到编辑个人资料屏幕。我如何将更新的编辑屏幕名称和日期参数传递给主个人资料?以下代码不起作用并返回无法读取未定义的属性“日期”:
const EditProfileScreen = () => {
const navigation = useNavigation();
}
return (
..
<TouchableOpacity style={styles.commandButton} onPress= {() => {navigation.navigate("Profile", {params: {date: date, name: name }})} }
activeOpacity={0.5}>
<Text style={styles.panelButtonTitle}>Submit</Text>
</TouchableOpacity>
);
这是个人资料屏幕的代码:
const ProfileScreen = ({route, navigation}) => {
const { date } = route.params;
const { name } = route.params;
return (
..
<Text>{JSON.stringify(date)}</Text>
<Text>{JSON.stringify(name)}</Text>
)
1个回答
您的方法没有任何问题,但是您缺少对个人资料屏幕的初始渲染的空处理。
这样想,第一次导航到个人资料屏幕时,不会有 route.params,因为您没有传递任何参数,这会导致错误。
但是当您移动到编辑屏幕并带着参数返回时,您将拥有可以毫无问题地访问的 route.params。
所以像这样更改您的代码
<Text>{JSON.stringify(route.params?.date)}</Text>
<Text>{JSON.stringify(route.params?.name)}</Text>
或者,如果您在个人资料屏幕的状态中拥有个人资料对象,请根据 route.params 的变化使用 useEffect 钩子对其进行更新。
Guruparan Giritharan
2021-09-20