Javascript 使用复选框从阵列中添加和删除对象

我在react native中实现了屏幕上的复选框，我试图实现的是，选中复选框后，它会将该对象添加到数组中，取消选中后，它会将其从数组中删除

我尝试过使用过滤方法和循环，但它并没有按照要求的方式工作

for (let i = 0; i<tmp.length; i++){
    console.log("length",tmp.length)
    if(tmp.id == item.id){
        tmp.splice(tmp.indexOf(item.id),1);
        // tmp.pop(item)
        console.log("POP")
    }
    else {
        tmp.push(item);
            console.log("PUSH")
    }
}

复选框的代码：

<CheckBox
    checked={this.state.selectedCheckList.includes(item.id)? true:false}
    onPress={()=>this.onCheckboxPress(item)} color={"#8BC63E"}
/>

之后：

tmp:[
    {name:'a', id:1, plant:3},
    {name:'c', id:3, plant:1}
],

var arr=[]；
功能更改（复选框）
{
如果（checkbox.checked==true）
{
arr.push（复选框值）；
}
其他的
{
var j=arr.indexOf（checkbox.value）；
arr.拼接（j，1）；
}
var stringArr=arr.join（'，'）；
document.getElementById（'display'）。innerHTML=stringArr；
}

A.
B
C
D

虽然这个问题与React Native相关，但所有答案都是HTML+JS

解决方案是在现有阵列的基础上创建一个新阵列，并将其附加到状态：

onCheckboxPress = (item) => {
  const selectedCheckList = contacts.filter((contact) => contact.id !== item.id);

  this.setState({ selectedCheckList });
}

然后在组件中，使用以下命令检查状态：

<CheckBox
  checked={() => this.isInList(item)}
  onPress={()=>this.onCheckboxPress(item)} color={"#8BC63E"}
/>

希望这对你有所帮助

Try this::

onCheckboxPress = (item) => {
  const selectedCheckList = contacts.filter((contact) => contact.id !== item.id);

  this.setState({ selectedCheckList });
}

<CheckBox
  checked={() => this.isInList(item)}
  onPress={()=>this.onCheckboxPress(item)} color={"#8BC63E"}
/>

isInList = (item) => {
  const { selectedCheckList } = this.state;

  return selectedCheckList.some((listItem) => listItem.id === item.id);
}