React Native Navigation传值时serialNumber显示undefined问题求助

• 传参顺序不匹配
  你调用startTT时的实参顺序为item.id、item.serialNumber、item.ttId、item.model，但函数定义的形参顺序为serialNumber, ttID, id，第一个形参serialNumber实际接收到的是item.id的值，顺序完全错位。
• 字段层级取值错误
  从你给出的item数据结构显示，serialNumber、ttId、model这些字段并不在item的根层级，而是存储在item.tasks数组的子元素中，直接取item.serialNumber本身就会返回undefined。
• 补充：函数形参末尾多余的逗号属于语法冗余，建议同时删除

方案1：调整取值+对齐参数顺序 #

首先修正字段取值路径，再对齐传参顺序：

按钮触发代码 #

<TouchableOpacity style={styles.actionButton}
onPress={() => {
  // 从tasks数组中取出目标任务项，这里默认取数组第一项，可按需调整索引
  const targetTask = item.tasks[0]
  // 按函数定义的参数顺序传递：serialNumber、ttID、id
  startTT(targetTask.serialNumber, targetTask.ttId, item.id)
}}>
</TouchableOpacity>

跳转函数代码（清理冗余逗号） #

// 移除末尾多余逗号
function startTT(serialNumber, ttID, id) {
    console.log("startJob Serial", serialNumber)
    navigation.navigate('SerialNo', { PSerial: serialNumber , ttId: ttID, STId: id, dataOBJ: serviceTData })
}

方案2：使用对象传参（更稳妥，避免顺序错位问题） #

推荐用解构传参彻底规避顺序错误问题：

跳转函数代码 #

// 改用对象解构接收参数，无需关心传参顺序
function startTT({ serialNumber, ttID, id }) {
    console.log("startJob Serial", serialNumber)
    navigation.navigate('SerialNo', { PSerial: serialNumber , ttId: ttID, STId: id, dataOBJ: serviceTData })
}

按钮触发代码 #

<TouchableOpacity style={styles.actionButton}
onPress={() => {
  const targetTask = item.tasks[0]
  startTT({
    serialNumber: targetTask.serialNumber,
    ttID: targetTask.ttId,
    id: item.id
  })
}}>
</TouchableOpacity>

如果你需要用到传递model参数，记得在函数定义中补充对应的形参即可。

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