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

问题描述：

我在用Reactjs点击按钮时推送对象。最初我有三种类型的对象，如“本地”，“全球”和“主”。我将这些名称作为参数传递给了onclock回调。如何避免插入与reactJs重复？如何删除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>

onclick事件

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

期待输出，

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

答

你可以尝试这样的事：

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

@Rajesh我会说这两种方法都是有效的。 – Christos

此外，如果我取消选中该复选框，未选中的选中应该被删除。我试过这种方式，var mainValues = []; mainValues.push（值）; var sameValueIndex = mainValues.indexOf（value）; mainValues.splice（sameValueIndex，1）;但它没有给出正确的结果 – Sathya

答

问题是您对每次点击事件推动的价值。相反，首先查找数组，然后使用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] 
    }) 
}

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

相关推荐