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

【问题标题】：How can I check for a value in a conditional array?如何检查条件数组中的值？
【发布时间】：2021-02-11 19:36:22
【问题描述】：

我有这段代码想要使用

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

呈现为 Checkbox 元素

{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))
              }
} }/>}/>})}

在选中的项目上，我想检查traitsArray中是否存在任何类似的值，如果true，则从数组中删除元素，如果false，将元素添加到数组中。

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

(e) => {
  if(traitsArray.some(({title}) => title === items.title)){
   settraitsArray(prevState => prevState.filter(item => item.title !== items.title))
  } else {
    settraitsArray(prevState => prevState.concat(items))
  }

}

【讨论】：

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

【解决方案2】：

您的“数据值”属性是一个字符串，而“traitsArray”是一个对象数组。这里 .includes() 函数将始终为 false 以将字符串与对象匹配。

【讨论】：

【解决方案3】：

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

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

当您检查if 条件时，您正在与e.target.getAttribute('data-value') 的string 值进行比较，即false。

只需像下面这样更新 else 条件，将 data-value 添加到 traitsArray 状态。

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

【讨论】：