如何获取array.map的当前迭代序号 为React Native元素动态添加order属性

1. 定义TypeScript类型 #

先定义对应的数据类型，保证TS类型校验正常：

// 原API返回的产品基础类型
interface Product {
  id: number;
  name: string;
}

// 扩展了order属性的产品类型
interface ProductWithOrder extends Product {
  order: number;
}

2. 遍历生成带order属性的新数组 #

利用Array.map()的第二个参数（当前遍历项的索引，默认从0开始），通过对象展开运算符生成全新对象，完全不会修改原API返回的数组：

// 原API返回的原始数组，全程不会被修改
const chosenProducts: Product[] = [
  {id:1 , name:"carpet"} ,
  {id:24 , name:"toy"} ,
  {id:28 , name:"laser"} ,
  {id:137 , name:"map"} ,
]

// 生成带order的新数组，order默认从1开始计数
const productsWithOrder: ProductWithOrder[] = chosenProducts.map((prod, index) => {
  // 展开原对象所有属性，追加order属性，返回的是独立的新对象
  return {
    ...prod,
    order: index + 1
  }
})

3. 渲染JSX时直接使用新数组 #

之后遍历带order的新数组渲染即可，order属性可直接用于排序、动态样式判断：

// 渲染逻辑示例
return (
  <View>
    {productsWithOrder.map(prod => (
      <View 
        key={prod.id}
        // 示例：用order做动态样式，奇数项高亮背景
        style={{backgroundColor: prod.order % 2 === 1 ? '#f5f5f5' : '#ffffff'}}
      >
        <Text>{prod.order}. {prod.name}</Text>
      </View>
    ))}
  </View>
)

注意事项 #

• 上述实现用的是对象浅拷贝，如果你产品对象存在深层嵌套属性，且需要完全和原对象隔离，可以把展开替换为structuredClone(prod)做深拷贝：

  return {
    ...structuredClone(prod),
    order: index + 1
  }
  

• 如果你的order规则不是按默认遍历顺序，可先对原数组做自定义排序后，再执行map加order属性即可，原数组始终不会被修改。

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