Вспомогательный помощник: найти объект в массиве объектов → установить значение в свойстве [дубликат]
4 ответа
При обновлении состояния ключевой частью является обращение с ним, как если бы оно было неизменным. Любое решение будет работать нормально, если вы можете это гарантировать.
Вот мое решение, используя immutability-helper :
jsFiddle: http: // jsfiddle.net/eLmwf14a/
var update = require('immutability-helper');
handleCommentEdit: function(id, text) {
var data = this.state.data;
var commentIndex = data.findIndex(function(c) {
return c.id == id;
});
var updatedComment = update(data[commentIndex], {text: {$set: text}});
var newData = update(data, {
$splice: [[commentIndex, 1, updatedComment]]
});
this.setState({data: newData});
},
Следующие вопросы о массивах состояний также могут помочь:
-
1– Alex Black 26 January 2015 в 05:14
Попытка очистить / объяснить лучше, как это сделать И что происходит.
- Сначала найдите индекс элемента, который вы заменяете в массиве состояний.
- Во-вторых,
updateэлемент в этом индексе - В-третьих, вызовите
setStateс новой коллекцией
import update from 'immutability-helper';
// this.state = { employees: [{id: 1, name: 'Obama'}, {id: 2, name: 'Trump'}] }
updateEmployee(employee) {
const index = this.state.employees.findIndex((emp) => emp.id === employee.id);
const updatedEmployees = update(this.state.employees, {$splice: [[index, 1, employee]]}); // array.splice(start, deleteCount, item1)
this.setState({employees: updatedEmployees});
}
-
1– Srikanth Bandaru 1 November 2017 в 05:45
Мне очень нравится делать это с Object.assign, а не с помощниками неизменяемости.
handleCommentEdit: function(id, text) {
this.setState({
data: this.state.data.map(el => (el.id === id ? Object.assign({}, el, { text }) : el))
});
}
Я просто считаю, что это намного более сжато, чем сращивание, и не требует знания индекса или явной обработки не найден случай.
-
1– iamcastelli 1 January 2018 в 06:25
-
2– Craig Myles 2 August 2018 в 23:14
-
3– Luke McGregor 3 August 2018 в 01:23
Когда вы работаете с массивом, вам нужно передать пользовательский атрибут, в моем примере я передаю атрибут data-index, data- является префиксом, когда вы передаете собственный атрибут, это также соглашение html 5, это то же самое как мы обновляем array в Reducer.
Пример:
//handleChange method
handleChange(e){
//getting custom attribute value.
let i = e.target.getAttribute('data-index'),
obj = Object.assign({}, this.state.arr[i],{[e.target.name]: e.target.value});
//update state value.
this.setState({arr: [...this.state.arr.slice(0, i), obj, ...this.state.arr.slice(i + 1)]})
}