检查两个数组是否相等,并禁用具有相同值的数组按钮

时间:2019-10-24 13:49:09

标签: javascript arrays reactjs

我是渲染卡,我有两个数组,我想禁用两个数组之间具有相同ID的按钮。

例如:

idOne = [9,5,1,4];
idTwo = [6,1,3,4];

在这种情况下,我想为4和1禁用按钮,因为两者的值相同。

这是我通过按钮的渲染方法

render(){
this.button()
}

这是我的尝试

button = () {
idOne = [9,5,1,4];
idTwo = [6,1,3,4];

const checkId = idOne.some(n => idTwo.includes(n))
if(checkedId){
return <Button disable />
} 

return <Button />
}
}

但这将禁用所有按钮,而不是具有相同ID的按钮。

感谢您的帮助

1 个答案:

答案 0 :(得分:1)

我将其分解为两个单独的步骤。首先,我将使用filter返回两个ID匹配的所有ID的数组。

const arr1 = [9, 5, 1, 4]
const arr2 = [6, 1, 3, 4]
const matches = arr1.filter(el => arr2.includes(el)

然后,一旦我有了所有匹配项的数组,就可以map对arr1中的所有ID进行检查,然后检查是否有任何ID同步。这将返回一个布尔值,该值将允许您渲染条件组件

return arr1.map(el => {
   if (matches.includes(el)) {
       return <Button disable />
   }

   return <Button />
})

如果需要,可以通过链接过滤器和地图将其重构为更小的步骤,只需一步即可

相关问题