React Navigation向另一屏幕传递参数时出现Undefined错误如何解决？

• Profile是栈导航的初始页面，用户首次进入时没有任何传递的参数，route.params本身为undefined，直接从undefined中解构date属性就会触发你遇到的报错。
• EditProfile页面传参的写法错误，navigation.navigate的第二个参数直接是要传递的参数对象，不需要额外嵌套一层params字段。

第一步：修改EditProfile页面的传参逻辑 #

把提交按钮的 onPress 逻辑调整为：

<TouchableOpacity 
  style={styles.commandButton} 
  onPress={() => {
    // 不需要嵌套params层，直接传参数对象
    navigation.navigate("Profile", { date: date, name: name })
    // ES6+ 可以简写为 navigation.navigate("Profile", { date, name })
  }}
  activeOpacity={0.5}
>
  <Text style={styles.panelButtonTitle}>Submit</Text>
</TouchableOpacity>

第二步：修改Profile页面的参数读取逻辑，添加默认值兜底 #

首次进入页面没有参数时，需要给route.params和具体属性设置默认值避免报错：

const ProfileScreen = ({route, navigation}) => {
  // 用空对象兜底params，同时给属性设置默认值
  const { date = '', name = '' } = route.params ?? {};

  // 如果需要监听参数更新触发逻辑，可以加这段useEffect
  // useEffect(() => {
  //   // 有参数传递进来时的处理逻辑
  // }, [route.params])

  return (
    <>
      <Text>{JSON.stringify(date)}</Text>
      <Text>{JSON.stringify(name)}</Text>
    </>
  )
}

如果你不需要保留EditProfile页面在栈中，提交后直接返回上一页的话，也可以把navigation.navigate替换为navigation.goBack配合回调的方式传参，避免栈中存在多个Profile页面的问题。

内容的提问来源于stack exchange，提问作者Tony