在 React Navigation 中将参数传递到另一个屏幕时出现“未定义”错误

Question

我有 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>
)

Answer 1

您的方法没有任何问题，但是您缺少对配置文件屏幕的初始呈现的 null 处理。

这样想，当您第一次导航到配置文件屏幕时，不会有 route.params，因为您没有传递任何最终导致错误的参数。

但是当您移动到编辑屏幕并返回参数时，您将拥有可以毫无问题地访问的 route.params。

所以像这样改变你的代码

<Text>{JSON.stringify(route.params?.date)}</Text>
    <Text>{JSON.stringify(route.params?.name)}</Text>

或者，如果您的配置文件对象处于配置文件屏幕的状态，请根据 route.params 的更改使用 useEffect 挂钩对其进行更新。