JavaScript: обновить значение свойства в массиве () с индексом в качестве параметра

Question

В настоящее время у меня есть функция реагирования, которая удаляет из массива под названием rento текущая арендная плата. Проблема заключается в том, что мне нужно обновить значение строки арендной платы, называемое status, и установить свойство от 1 до 4, работает приведенный ниже код. Кажется, я не понимаю, как получить Индекс арендной платы, чтобы иметь возможность его обновлять.

removeItem (itemIndex) {
    this.state.rents.splice(itemIndex, 1) // removes the element
    this.setState({rents: this.state.rents}) // sets again the array without the value to the rent prop
    console.log(itemIndex) // itemIndex
}

в настоящее время я добавляю это в код для отладки, но получаю эту ошибку

console.log(this.state.rents[itemIndex].unique_key)

Трассировка стека

TypeError: Cannot read property 'unique_key' of undefined

Мне нужно иметь возможность обновить значение свойства ренты с именем status с 1 на 4 и setState снова

Answer 1

Лично мне нравится использовать метод filter для удаления элементов из состояния и я хочу предложить альтернативное решение.Как мы пытались объяснить в комментариях и ответе @Thiago Loddi, вы не должны изменять свое состояние таким образом.

Для массивов используйте методы, такие как map, filter, slice, concat, чтобы создавать новые в соответствии с ситуацией.Вы также можете использовать синтаксис распространения для поверхностного копирования вашего массива.Затем установите свое состояние, используя этот новый.Для объектов вы можете использовать Object.assign или распространять синтаксис снова для создания новых.

Предупреждение, синтаксис распространения и Object.assign создает мелкие копии.Если вы изменяете вложенное свойство этого вновь созданного объекта, вы изменяете исходное свойство.Просто имейте в виду, что для этой ситуации вам нужна глубокая копия, или вам следует снова изменить объект, не изменяя его каким-либо образом.

Вот альтернативное решение с filter.

removeItem = itemIndex => {
  const newRents = this.state.rents.filter((_, index) => index !== itemIndex);
  this.setState({ rents: newRents });
};

Если вы хотите зарегистрировать это новое состояние, вы можете использовать обратный вызов на setState, но лично мне нравится регистрировать состояние в методе render.Итак, вот еще одна альтернатива:)

render() {
    console.log( this.state.rents );
    ...
}

Answer 2

Чтобы разработать комментарии, начнем с самого важного:

Как сказал @devserkan, вы никогда не должны изменять свое состояние (и подпорки), в противном случае вы начнете видеть некоторые действительно странные, трудные для понимания ошибки. При манипулировании состоянием всегда создавайте его копию. Вы можете прочитать больше здесь .

Теперь на ваш вопрос:

this.setState является асинхронным, поэтому для получения обновленного значения вашего состояния вы должны использовать функцию обратного вызова

const rents = [...this.state.rents]; // create a copy
rents.splice(itemIndex, 1);
this.setState({ rents }, () => {
  console.log(this.state.rents); // this will be up-to-date
});
console.log(this.state.rents); // this won't