只压入尚未在数组中的对象

Question

这是我的功能:

const multiSelect = value => {
let tmpArr = [...selectedPeople];
if (tmpArr.length === 0) {
tmpArr.push(value);
} else {
tmpArr.map(item => {
if (item.id !== value.id) {
tmpArr.push(value);
} else {
return;
}
});
}
setSelectedPeople(tmpArr);
};

我想通过与所有项进行比较来检查数组中的新值。如果value === item项的循环函数应该是return，但如果该值尚未在数组中，则应该将其压入。

这对我来说是个大问题，但我想这对你们来说是个小问题。

Answer 1

使用Array.every()检查数组是否包含与id相同的项:

const multiSelect = value => {
const tmpArr = [...selectedPeople];

if(tmpArr.every(item => item.id !== value.id)) {
tmpArr.push(value);
}
setSelectedPeople(tmpArr);
};

然而，这意味着你在不必要地复制数组，而导致重新渲染，这不会做任何事情。因此，通过使用Array.some()检查项目是否已经是selectedPeople的一部分，如果它确实使用return提前退出函数。如果没有，继续克隆并更新状态:

const multiSelect = value => {
if(tmpArr.some(item => item.id === value.id)) {
return;
}
const tmpArr = [...selectedPeople];

tmpArr.push(value);
setSelectedPeople(tmpArr);
};

Answer 2

使用find检查项目是否已经在数组中。同样，也不需要复制源数组:

const multiSelect = value => {
if (!selectedPeople.find(item => item.id === value.id))
setSelectedPeople(selectedPeople.concat(value))
}

Answer 3

另一种方法

const
multiSelect = value => setSelectedPeople([
...selectedPeople,
...selectedPeople.some(({ id }) => id === value.id)
? []
: [value]
]);