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

Question

我们要解决的问题

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

是否为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() looks up an array element by its value using strict equality. This only works with primitive values.

由于 state.events[] 包含一个对象数组（不是原始数组），indexOf() returns -1 因为找不到 non-primitive。将 -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)
}

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

When I try to delete a specified array using indexOf and splice, another value is deleted

javascript

vue.js

vuex

nuxt.js

我们要解决的问题

解决方案