React Native FlatList渲染对象数组时ProductCard无法接收数据如何解决

错误原因 #

• renderItem回调的参数解构错误：FlatList官方规定renderItem接收的参数对象中，当前遍历项的固定属性名为item，自定义itemProduct命名无法匹配，最终拿到的是undefined
• 传值多余嵌套：即使拿到了正确的遍历项，item={{itemProduct}}的写法会给原始数据多套一层对象，ProductCard内需要通过item.itemProduct才能拿到原始数据，属于无效嵌套

修复代码 #

直接修改FlatList的renderItem逻辑即可：

<FlatList
    data={item}
    renderItem={({ item, index }) => <ProductCard item={item} />}
    keyExtractor={(item, index) => index.toString()}
/>

修复后ProductCard内部直接通过props接收的item就可以正常访问数组每一项的所有属性，比如item.id、item.id_order.created均可正常取值。

可选优化建议 #

keyExtractor优先使用业务唯一字段作为key，避免数组排序、增删项时出现渲染异常，优化后写法：

keyExtractor={(item) => item.id.toString()}

内容的提问来源于stack exchange，提问作者OSCAR ANDRE PAREDEZ URIZAR