React Native FlatList的renderItem中{item}解构疑问

核心原因：renderItem 接收的是包裹对象，而非直接的数组元素 #

和 React 中 array.map((track) => ...) 直接拿到数组元素不同，React Native 的 FlatList 给 renderItem 传递的不是单个数组元素，而是一个包含多个属性的对象。这个对象的结构大概是：

{
  item: 数组中的单个元素,
  index: 当前元素的索引,
  separators: { highlight, unhighlight, updateProps } // 用于分隔线交互的工具
}

为什么要解构 {item}？ #

解构只是为了代码更简洁：

• 不解构的话，你需要写 renderItem={(param) => <TrackCard data={param.item} />}，每次都要通过 param.item 访问数组元素；
• 解构后直接写 renderItem={({ item }) => <TrackCard data={item} />}，可以直接拿到目标元素，逻辑更清晰；
• 如果需要用到索引，还能一起解构：renderItem={({ item, index }) => <TrackCard data={item} rank={index + 1} />}。

为什么“item”不是数组对象的字段却能被识别？ #

这里的 item 是 FlatList 官方定义的包裹对象的属性名，和你数组里的对象字段完全无关。不管你的数组元素是 { trackName, artist } 还是其他结构，FlatList 都会把这个元素放到包裹对象的 item 属性里，传递给 renderItem。

举个实际例子：
假设你的曲目数组是：

const topTenTracks = [
  { trackName: "Hello", artist: "Adele" },
  { trackName: "Blinding Lights", artist: "The Weeknd" }
];

FlatList 渲染第一个元素时，传给 renderItem 的参数是：

{
  item: { trackName: "Hello", artist: "Adele" },
  index: 0,
  separators: { ... }
}

解构 { item } 后，你就能直接使用 item.trackName、item.artist 来访问曲目信息了。

完整示例代码 #

import { FlatList, View, Text, StyleSheet } from 'react-native';

// 曲目卡片组件
const TrackCard = ({ track }) => (
  <View style={styles.card}>
    <Text style={styles.trackName}>{track.trackName}</Text>
    <Text style={styles.artist}>{track.artist}</Text>
  </View>
);

// 曲目列表组件
const TopTenTracks = ({ topTenTracks }) => (
  <FlatList
    data={topTenTracks}
    keyExtractor={(item) => item.trackName} // 这里的item也是数组元素
    renderItem={({ item }) => <TrackCard track={item} />}
  />
);

// 样式
const styles = StyleSheet.create({
  card: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee'
  },
  trackName: {
    fontSize: 18,
    fontWeight: '500'
  },
  artist: {
    fontSize: 14,
    color: '#666',
    marginTop: 4
  }
});

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