Javascript 如何检查条件数组中的值？

我有一段我想使用的代码

const traits = [{title:"hello", effect:"world"},{title:"foo", effect:"bar"}];
const [ traitsArray, settraitsArray ] = useState([]);

要呈现为复选框元素

{traits.map((items)=>{
   return <FormControlLabel
           label={items.title}
           key={items.title}
           control={<Checkbox data-value={items.title} checked={false} onChange={ e => {
              if(traitsArray.includes(e.target.getAttribute('data-value'))){
                 settraitsArray(prevState => prevState.filter(items => items !== e.target.getAttribute('data-value')))
              }
              else{
                 settraitsArray(prevState => prevState.concat(items))
              }
} }/>}/>})}

{traits.map（（项目）=>{
返回prevState.filter（items=>items！==e.target.getAttribute（'data-value'））
}
否则{
setTraitArray（prevState=>prevState.concat（项目））
}
} }/>}/>})}

在checked item上，我想检查

traitsArray

中是否存在任何类似的值，如果为true，则从数组中删除该元素，如果为false，则将该元素添加到数组中

---

但每次我检查该项时，它都会继续连接数组。是我遗漏了什么，还是我编码错误了？

在您的

onChange

函数中，您正在检查数组是否包含字符串，但如果不包含字符串，则正在添加对象。您的函数应该如下所示：

（e）=>{
if（traitsArray.some（（{title}）=>title==items.title））{
setTraitArray（prevState=>prevState.filter（item=>item.title！==items.title））
}否则{
setTraitArray（prevState=>prevState.concat（项目））
}
}

您的“数据值”属性是一个字符串，“traitsArray”是一个对象数组。Here.includes（）函数在将字符串与对象匹配时始终为false。

在else部分，您正在数组中添加一个对象

settraitsArray(prevState => prevState.concat(items))

而当您检查

if

条件时，您正在与

e.target.getAttribute（'data-value'）

的

字符串

值进行比较，该值为

false

只需更新下面的else条件，将

数据值添加到
traitsArray
状态

settraitsArray(prevState => prevState.concat(e.target.getAttribute('data-value')))

这个很干净！需要补充的一点是，
.some
和
.includes
之间有什么区别？对我来说，这两种方法的效果似乎都一样。
.includes
对数组中的每个项目和参数进行比较。如果数组中满是字符串，那么这种方法很有效。但是，如果您在对象数组上迭代，
。某些
允许您深入到您真正关心的值。