当我尝试使用indexOf和splice删除指定的数组时，会删除另一个值

Question

我们要解决的问题

我用Vuex管理我的价值观。我想删除事件数组中的给定值，并尝试使用indexOf和splice删除该值，但它删除了屏幕上的另一个值。在服务器端，该值被成功删除，因此重新加载服务器会返回正确的值。

为indexOf和splice指定的值是否有错误？我想知道是什么原因造成的，以及如何修复它。

＃代码

阵列数据

// I want to delete a specified value from an array containing a large amount of data.
[0 … 99]
[100 … 199]
[200 … 250]
0:
color: "#2196F3"
end: 1649116800000
id: 7
long_time: true
name: ""
post_id: null
start: 1649115900000
timed: true
updated_at: "2022-04-05T08:44:01.049+09:00"
・
・
・
・

存储

export const state = () => ({
events: [],
})
export const mutations = {
deleteEvent(state, payload) {
state.events.splice(state.events.indexOf(payload), 1)
},
}
export const actions = {
deleteEvent ({ rootState, commit }, event) {
this.$axios.$delete(`${url.SCHEDULE_API}/${event.id}`)
.then(() => {
commit('deleteEvent', event)
・
・
・
・
})
},
}

**组件**

// selectedEvent
{
color: (...)
created_at: (...)
end: (...)
id: (...)
long_term_id: (...)
long_time: (...)
name: (...)
post_id: (...)
start: (...)
timed: (...)
updated_at: (...)
}

methods: {
deleteEvent (event) {
this.selectedOpen = false
this.$store.dispatch('schedule/deleteEvent', this.selectedEvent)
},
}

Answer 1

Array.prototype.indexOf()使用严格的等式根据数组元素的值查找数组元素。这仅适用于基元值。

由于state.events[]包含对象数组(而非基元(，indexOf()返回-1，因为找不到非基元。将-1索引传递给Array.prototype.splice()会删除最后一个元素，从而导致您观察到的行为。

解决方案

要在数组中查找对象，请使用带有回调的Array.prototype.findIndex()，该回调将其参数的id属性(或某些其他唯一标识符(与有效载荷中的属性进行比较：

const index = state.events.findIndex(event => payload.id === event.id)
if (index > -1) {
state.events.splice(index, 1)
}