React Native统计用户购买商品频次 求更优实现方案

直接用Array.reduce()一步完成频次统计，再转换为适合FlatList渲染的结构，代码更简洁高效：

const arrayData = statDetails.purchasedItems;
// 统计每个商品的购买频次
const itemCounts = arrayData.reduce((acc, itemName) => {
  acc[itemName] = (acc[itemName] || 0) + 1;
  return acc;
}, {});

// 转换为FlatList可用的对象数组，同时包含商品名和购买频次
const countArray = Object.entries(itemCounts).map(([itemName, count]) => ({
  item: itemName,
  purchaseCount: count
}));

代码说明 #

• 频次统计：reduce遍历原数组时直接累计每个商品的出现次数，比手动循环+includes去重的方式性能更优，也省去了单独维护去重数组的步骤。
• 结构转换：Object.entries()把频次对象转成[商品名, 次数]的二维数组，再通过map直接生成FlatList需要的结构化数据，每个元素同时包含商品名称和对应购买次数，渲染时无需再关联多个数组。

FlatList渲染示例 #

<FlatList
  data={countArray}
  keyExtractor={(item) => item.item}
  renderItem={({ item }) => (
    <View style={{ padding: 12, borderBottomWidth: 1 }}>
      <Text>商品：{item.item}</Text>
      <Text>购买次数：{item.purchaseCount}</Text>
    </View>
  )}
/>

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