React Native组件传Prop后访问对象属性返回undefined问题求助

看起来你踩了FlatList renderItem 方法的一个常见小坑！

问题根源 #

FlatList 的 renderItem 回调函数接收的参数不是直接的数据项本身，而是一个包含 index（索引）和 item（对应的数据项）的对象。你现在把这个完整的参数对象传给了 ListItem 的 library prop，所以 this.props.library 其实是 { index: 数字, item: { title: 'xxx', ... } } 这样的结构——你要找的 title 是嵌套在 item 属性里的，直接访问 this.props.library.title 当然会返回 undefined。

两种解决办法 #

1. 传递时直接解构出数据项（推荐）

在 LibraryList 的 FlatList 里，修改 renderItem 的写法，把真正的数据项（也就是 item）传给 ListItem：

<FlatList
  // 其他属性...
  renderItem={({ item }) => <ListItem library={item} />}
/>

这样在 ListItem 里，this.props.library 就直接是你的数据对象了，this.props.library.title 就能正常拿到值。

2. 在 ListItem 里访问嵌套属性

如果不想修改传递逻辑，也可以在 ListItem 里调整访问路径：

console.log(this.props.library.item.title); // 这样就能拿到正确的title值

不过这种写法不够直观，还是第一种方案更清晰，符合你传递「library对象」的预期。

你可以试试第一种方案，应该就能解决问题啦！

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