React Native FlatList的renderItem属性参数异常问题求助

嘿，这个坑我之前踩过！其实问题出在FlatList的renderItem函数接收的参数结构上——它并不是直接把数组里的单个元素传给你，而是传了一个包含多个属性的对象，其中真正对应数组元素的是这个对象里的item属性。

你之所以把参数命名为userData会提示未定义，是因为你误以为这个参数就是数组里的每一项，但实际上userData指的是那个完整的参数对象，而这个对象里并没有叫userData的属性，自然会报错。

给你举个直观的例子：

错误写法（就是你现在遇到的情况） #

<FlatList
  data={userList} // 假设这是你的非空数组
  renderItem={(userData) => <Text>{userData.name}</Text>}
/>

这里的userData其实是一个类似{ item: {...}, index: 0, separators: {...} }的对象，你直接访问userData.name当然找不到，因为这个对象里没有name属性，name在userData.item里。

正确的两种写法 #

1. 解构并重命名（推荐，代码更简洁）：
   直接从参数对象里解构出item，然后重命名为你想要的userData：

<FlatList
  data={userList}
  renderItem={({ item: userData }) => <Text>{userData.name}</Text>}
/>

2. 直接访问对象属性：
   如果你不想解构，也可以先拿到参数对象，再通过.item获取数组元素：

<FlatList
  data={userList}
  renderItem={(listItem) => <Text>{listItem.item.name}</Text>}
/>

简单来说，FlatList的renderItem回调设计就是这样的，它会把当前项、索引、分隔器控制等信息打包成一个对象传给你，所以必须通过item属性才能拿到数组里的具体元素，不能直接把参数名换成你想要的变量名哦。

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