如何避免在reactjs.中推送状态数组中的重复对象

Question

下面给定的状态在我的类组件中。需要避免在数组中添加重复对象我的状态在下面给出

this.state = {
frequency: {
time: [
{time:"20:15",timezone:"IST"},
{time:"01:30",timezone:"UST"}
],
},
};

要求是sholud不添加具有相同时间和时区值的对象。我的推送代码在下面

this.setState((state) => ({
...state,
frequency: {
...state.frequency,
time: [...state.frequency.time, selecttime],
},
)}
))

在时间阵列中携带要推送的对象的选择时间

const selecttime = {time:"20:15",timezone:"IST"}

我不应该再添加相同的对象。如何避免在状态数组中推送重复对象

Answer 1

首先，您需要搜索数组以查看是否存在重复项。以下是搜索数组的一种方法。

const isDuplicate = (data, obj) =>
data.some((el) =>
Object.entries(obj).every(([key, value]) => value === el[key])
);

外循环使用引用对象值的内循环搜索与每个对象属性匹配的某个元素。如果发现一个元素的所有属性都等于引用对象，则返回true，否则返回false。

const data = [
{
time: "20:15",
timezone: "IST"
},
{
time: "01:30",
timezone: "UST"
}
];
const isDuplicate = (data, obj) =>
data.some((el) =>
Object.entries(obj).every(([key, value]) => value === el[key])
);
console.log(
isDuplicate(data, {
time: "20:15",
timezone: "IST"
})
); // true
console.log(
isDuplicate(data, {
time: "21:15",
timezone: "IST"
})
); // false

如果不是重复，则仅更新状态

if (!isDuplicate(state.frequency.time, selecttime)) {
this.setState((state) => ({
...state,
frequency: {
...state.frequency,
time: [...state.frequency.time, selecttime],
},
)}
));
}