React reducer中按key去重存入商品的state更新逻辑失效问题

你的productsInMyList状态存储的是商品对象数组，Array.includes()执行的是全等匹配，你直接传入productsInMyList.key（单个key值）和数组内的对象做匹配，永远会返回false，导致去重判断完全失效，所有商品都会被追加进数组。
另外你代码里存在变量名混淆问题：action.payload里取出的单个商品对象和状态里的商品数组同名，也容易引发逻辑错误。

改用Array.some()遍历数组匹配每个元素的key值，只要有一个元素的key和新商品key相等，就判定为重复：

const defaultState = {  
  productsInMyList: [],
};

// 取出接口返回的单个商品，修改变量名避免和状态数组重名
const { productsInMyList: newProduct } = action.payload;

// 校验商品是否已存在
const isDuplicate = state.productsInMyList.some(item => item.key === newProduct.key);

const newProductsInMyList = isDuplicate
  ? state.productsInMyList
  : [...state.productsInMyList, newProduct];

return {
  ...state,
  productsInMyList: newProductsInMyList,
};

• 若你的商品唯一标识不是key（比如是id、sku_id等），把判断逻辑中的key替换为对应的字段即可。

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