React Navigation跳转新屏幕传递的参数为空问题排查

问题根因 #

• 接收页useState语法错误：useState()返回值是长度为2的数组，你使用了对象解构语法{}接收返回值，导致tableSize变量始终为undefined
• 参数键名不匹配：发送页调用navigation.navigate时传递的参数键为PV，你直接将整个route.params对象作为初始值赋值，没有提取对应键的值
• 附加非传参类bug：发送页onPlayersOpen回调中调用的setCityOpen、onBlindsOpen回调中调用的setCountryOpen均未定义对应state，运行时会抛出未定义错误

修复方案 #

仅需修改SessionScreen页面的参数获取部分代码即可：

export default function SessionScreen ( {route, navigation} ) {
  // 直接从路由参数提取PV字段，加可选链避免未传参场景下报错
  const tableSize = route.params?.PV
  // 若需要给参数加默认值，可以写成：const tableSize = route.params?.PV ?? '2'
  const [players, setPlayers] = useState(tableSize)
  
  // 其余原有代码保持不变即可

如果需要将tableSize作为可修改的状态变量，写法如下：

const [tableSize, setTableSize] = useState(route.params?.PV)
const [players, setPlayers] = useState(tableSize)

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