Javascript 筛选器从react中的数组中删除元素

我在状态中声明了一个数组

this.state = {
  typeAdded: [] 
}

现在，我有两张桌子都有复选框。现在，我要做的是，如果用户单击复选框，那么我将在该数组中添加该值，如果未选中，那么我将从该数组中删除该值。现在在这里

if (e.currentTarget.checked) {
      this.setState({
        typeAdded: this.state.typeAdded.concat([type])
      }, () => {
        this.setState({
          areResumesSameType: this.state.typeAdded.every((val, i, arr) => val === arr[0])
        })
      })
    } else {
      this.setState({
        typeAdded: this.state.typeAdded.filter(function (a) {
          return a !== type 
        })
      }, () => {
        this.setState({
          areResumesSameType: this.state.typeAdded.every((val, i, arr) => val === arr[0])
        })
      });
    }

现在，这里只有两种类型的值被跟踪或未跟踪

因此阵列将具有

["tracked", "tracked", "untracked", "tracked", "untracked"] kind of values . It represents which type of table value is checked.   

现在，当我尝试在取消选中时从此表中删除其中一个值时，删除该值就是删除所有匹配的值，因为我正在使用

过滤器

。所以，我尝试的是删除当时仅有的一个值，因为其他值可能已被检查，但它们也将被删除

有人能帮我吗？

array.filter（）

不适合您的设置。如果您计划将

类型添加为字符串数组，
[“”]
。如果有多个相同的值，则该方法无法基于一个值有效地删除单个项

如果要保持
typeAdded
不变，可以尝试根据索引切换值

请参见此处的codesandbox，例如：

类应用程序扩展了React.Component{
状态={
已添加类型：[]
}
handleOnChange=（事件、索引）=>{
const newState=[…this.state.typeAdded]
if（event.currentTarget.checked）{
newState[索引]=“已跟踪”
这是我的国家({
typeAdded:[…新闻状态]
})
}否则{
newState[索引]=“未跟踪”
这是我的国家({
typeAdded:[…新闻状态]
})
}
}
render（）{
返回(
this.handleOnChange（e，0）}/>
这个.handleOnChange（e，1）}/>
这个.handleOnChange（e，2）}/>
这个.handleOnChange（e，3）}/>
);
}
}

本质上，您只需要删除
.filter（）
，然后按索引切换值。
为什么不更改添加到对象的数组类型，该对象将每个复选框映射到一个值？此处跟踪和未跟踪的值作为该方法itseldf的一种类型。所以，它变得added@ganesh，我不太明白你的意思。你的意思是，如果复选框被取消选中，你只想删除该项吗？是的，我的意思是，正如我在问题中添加的，如果我们取消选中，那么它可能来自跟踪或未跟踪的表，从该列表中，这应该被删除
class App extends React.Component {
  state = {
    typeAdded: []
  }

  handleOnChange = (event, index) => {
    const newState = [...this.state.typeAdded]
    if(event.currentTarget.checked){
      newState[index] = "tracked"
      this.setState({
        typeAdded: [...newState]
      })
    } else {
      newState[index] = "untracked"
      this.setState({
        typeAdded: [...newState]
      })
    }
  }

  render() {
    return (
      <div className="App">
        <input type="checkbox" onChange={(e) => this.handleOnChange(e, 0)}/>
        <input type="checkbox" onChange={(e) => this.handleOnChange(e, 1)}/>
        <input type="checkbox" onChange={(e) => this.handleOnChange(e, 2)}/>
        <input type="checkbox" onChange={(e) => this.handleOnChange(e, 3)}/>
      </div>
    );
  }
}