Javascript: обновить значение свойства в Array () с индексом в качестве параметра
В настоящее время у меня есть функция реагирования, которая удаляет из массива, называемого сдает текущую арендную плату безупречно. Проблема в том, что мне нужно обновить значение строки аренды с именем 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.info(itemIndex) // itemIndex
}
в настоящее время я добавляю это в код для отладки, но получаю эту ошибку
console.info(this.state.rents[itemIndex].unique_key)
Трассировки стека
TypeError: Cannot read property 'unique_key' of undefined
Мне нужно иметь возможность обновить значение арендуемой собственности под названием status с 1 до 4 и снова setState.
Я действительно не понимаю, что вы хотите сделать, но если мы говорим о опубликованном вами коде, не делайте этого. Не изменяйте таким образом свое состояние.
У @devserkan есть какой-либо учебный пример, поэтому я могу понять, заранее спасибо.
Не используйте splice непосредственно в своем штате, даже лучше не используйте его. Используйте slice или .filter для создания новых массивов. Не назначайте свое состояние, используя себя снова, как это делаете вы. Вы можете найти хороший учебник в ответе @Thiago Loddi.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Чтобы развить комментарии, начнем сначала с самого важного:
Как сказал @devserkan, вы никогда не должны изменять свое состояние (и свойства), иначе вы начнете замечать действительно странные, непонятные ошибки. При манипулировании состоянием всегда создавайте его копию. Вы можете прочитать больше здесь.
Теперь к вашему вопросу:
this.setState является асинхронным, поэтому для получения обновленного значения вашего состояния вы должны использовать функцию обратного вызова
const rents = [...this.state.rents]; // create a copy
rents.splice(itemIndex, 1);
this.setState({ rents }, () => {
console.info(this.state.rents); // this will be up-to-date
});
console.info(this.state.rents); // this won't
Лично мне нравится использовать метод 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.info( this.state.rents );
...
}
использовать установленное состояние api, которое принимает функцию обратного вызова