React Native实现数组按key去重，仅展示唯一元素的方法

方案一：添加商品时直接去重（推荐） #

从源头避免重复项进入store数组，后续渲染无需额外处理。修改addToCart的逻辑：

// 在CartContext的addToCart方法中添加判断
const addToCart = (newItem) => {
  // 取出当前商品的唯一key（newItem的第三个元素）
  const targetKey = newItem[2];
  // 检查store中是否已存在相同key的商品
  const hasDuplicate = store.some(item => item[2] === targetKey);
  
  if (!hasDuplicate) {
    setStore(prevStore => [...prevStore, newItem]);
  }
};

这样点击添加按钮时，重复商品会被直接过滤，store数组始终只保留key唯一的项，FlatList可以直接使用data={store}渲染。

方案二：渲染FlatList时处理数据 #

如果不想修改添加逻辑，可在FlatList的data属性中对store做去重处理：

// 利用Map的键唯一性实现去重，最后转成数组
const uniqueStore = Array.from(
  new Map(store.map(item => [item[2], item])).values()
);

// 渲染FlatList时使用去重后的数组
<FlatList 
  data={uniqueStore}
  renderItem={({ item }) => {
    return (
      <View style={styles.listItem}>
        <Text style={styles.itemText}>{item[0]}   {item[1]}</Text>
      </View>
    )
  }}
  keyExtractor={(item) => item[2]} // 必须添加，用商品唯一key作为列表项标识
/>

这里Map会自动覆盖相同key的项（保留最后一次添加的版本），转换后的数组就是去重后的结果。

补充：支持商品信息更新的场景 #

如果相同key的商品需要更新图片/文本内容，可修改方案一的逻辑，替换已存在的商品而不是跳过：

const addToCart = (newItem) => {
  const targetKey = newItem[2];
  setStore(prevStore => {
    const duplicateIndex = prevStore.findIndex(item => item[2] === targetKey);
    if (duplicateIndex !== -1) {
      // 存在则替换更新商品信息
      const updatedStore = [...prevStore];
      updatedStore[duplicateIndex] = newItem;
      return updatedStore;
    } else {
      // 不存在则添加新商品
      return [...prevStore, newItem];
    }
  });
};

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