如何删除reactJs中对象数组中的重复项？答案

【问题标题】：How to remove duplicates in array of objects in reactJs?如何删除reactJs中对象数组中的重复项？
【发布时间】：2017-05-14 14:43:58
【问题描述】：

我在使用 Reactjs 单击按钮时推动对象。最初我拥有三种类型的对象，如“LOCAL”、“GLOBAL”和“MAIN”。我将这些名称作为参数传递给 onclock 回调。如何避免使用 reactJs 插入重复项？

我的渲染代码，

<div>
   <input type="checkbox" onClick={this.checkedIn.bind(this, "LOCAL", "12")} />
   <button type="checkbox" onClick={this.checkedIn.bind(this, "GLOBAL", "15")} />
   <button type="checkbox" onClick={this.checkedIn.bind(this, "MAIN", "11")} />
  <button type="checkbox" onClick={this.checkedIn.bind(this, "MAIN", "13")} />
</div>

点击事件

var objectVale = [];
checkedIn(type, value) {
  objectVale.push({
    type:type,
    value:[value]
  })
}

期待输出，

[
  {
    "type":"LOCAL",
    "value":[12]
  },
  {
    "type":"GLOBAL",
    "value":[15]
  },
  {
    "type":"MAIN",
    "value":[11, 13]
  }
]

【问题讨论】：

标签： javascript jquery html reactjs

【解决方案1】：

你可以试试这样的：

var objectVale = [];
checkedIn(type, value) {

    var index = objectValue.findIndex(function(obj){ return obj.type === type; });
    if(index === -1){ // Object with the specific type not found.
        objectValue.push({
            type:type,
            value:[value]
        })
    } else { // Object with the specific type found. So push only the value.
        objectValue[index].value.push(value)
    }
}

【讨论】：

另外我建议使用.find。这样你就不必使用索引来获取对象了。
@Rajesh 我想说这两种方式都有效。
另外，如果我取消选中该复选框，则应删除未选中的选中项。我试过这种方式， var mainValues = []; mainValues.push(值); var sameValueIndex = mainValues.indexOf(value); mainValues.splice(sameValueIndex, 1);但它没有给出正确的结果

【解决方案2】：

问题是您正在为每个点击事件推送价值。相反，首先查找数组并使用type 找到必要的对象，然后将值推送到该对象的值数组。

var o = objectVale.find(function(x) {
  return x.type === type;
})

if (o) {
  o.value = o.value || [];
  o.value.push(value);
} else {
  objectVale.push({
    type: type,
    value: [value]
  })
}

【讨论】：