React Native 如何从对象的tasks数组中取对应serialNumber的字段渲染到Text组件

问题原因 #

你现有代码的问题在于：

• filter方法返回的是符合条件的对象数组，后续的map如果按你现在的写法返回{warrantyStatus}对象，最终得到的warranty是一个[{warrantyStatus: 'xxx'}]格式的数组，不能直接放到Text组件里渲染
• 你后续渲染时用的item.warrantyStatus里的item是完整的tasks数组，自然取不到对应属性

正确实现 #

更简单的写法是用find方法直接匹配对应任务项（适合serialNumber唯一的场景，性能也比filter+map更好）：

// 匹配serialNumber对应的任务项
const matchedTask = dataOBJ.tasks.find(task => task.serialNumber === PSerial)
// 取warrantyStatus，匹配不到时给空字符串作为兜底默认值
const warrantyStatus = matchedTask ? matchedTask.warrantyStatus : ''

渲染时直接用上面得到的warrantyStatus即可：

<Text style={{ fontWeight: 'bold' }}>{warrantyStatus}</Text>

如果你一定要保留filter+map的写法，调整为如下即可：

const warrantyList = dataOBJ.tasks
  .filter(task => task.serialNumber === PSerial)
  .map(task => task.warrantyStatus)

渲染时取数组第一项加兜底：

<Text style={{ fontWeight: 'bold' }}>{warrantyList[0] || ''}</Text>

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