如何保证存储商品属性的对象数组key唯一，更新而非新增条目？

解决方案 #

你可以通过「先过滤数组中同key的旧对象，再拼接新对象」的逻辑实现属性更新，同时建议使用React的函数式setState写法，避免异步更新导致的状态获取异常，另外你原代码中else if分支错误使用了赋值运算符，需要修改为判断运算符。

修改后的完整代码如下：

const handleAttributeChange = (object, type, label) => {
  this.setState(prevState => {
    // 拷贝原有状态
    const newSelectedAttr = {...prevState.selectedAttributes, id: id};
    if (type === "text") {
      // 过滤掉同label的旧属性后加入新属性
      newSelectedAttr.text = [
        ...prevState.selectedAttributes.text.filter(item => !item.hasOwnProperty(label)),
        object
      ];
    } else if (type === "swatch") {
      newSelectedAttr.swatch = [
        ...prevState.selectedAttributes.swatch.filter(item => !item.hasOwnProperty(label)),
        object
      ];
    }
    return { selectedAttributes: newSelectedAttr };
  });
};

逻辑说明 #

• 调用filter方法遍历对应类型的属性数组，用hasOwnProperty判断对象是否包含当前传入的属性key（即入参label），剔除已经存在的同key旧对象
• 把过滤后的旧数组和新的属性对象拼接，等价于更新原有属性，而非新增条目
• 使用函数式setState入参prevState获取最新的状态，避免直接依赖this.state可能出现的异步更新异常
• 修复原代码else if ((type = "swatch"))的赋值bug，改为type === "swatch"全等判断

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