Когда я пытаюсь удалить указанный массив с помощью indexOf и splice, другое значение удаляется

Что мы хотим решить

Я управляю своими ценностями с помощью 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)
    },
}

Что именно делает deleteEvent? Вероятно, вы делаете внутренний вызов, чтобы удалить его, а затем получаете с ним обновленные данные (удаляя их один раз). Затем вы splice это удаляете второй элемент. Похоже на самое простое объяснение. В противном случае проверьте инструменты разработки Vue до и после вызова метода. То же самое касается бэкенда.

kissu 09.04.2022 11:11

@kissu deleteEvent отправляет данные для удаления на сервер. Затем indexOf и splice используются для удаления тех же данных в deleteEvent в mutation. Значения кажутся удаленными из самого заднего значения в массиве.

Ke kaji 09.04.2022 14:11
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
2
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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)
}

Другие вопросы по теме

Похожие вопросы