开发者问题收集

在 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