我正在尝试更新存储在数组中的对象的属性。
我的状态看起来像这样:
state = {
todos: [
{
id: '1',
title: 'first item,
completed: false
},
{
id: '2',
title: 'second item,
completed: false
}
],
}
我想做的是访问“todos”数组中的第二个元素,并将完成的属性更新为 false -> true 或 true -> false。
我有一个带有更新处理程序的按钮,我的更新类方法如下所示:
onUpdate = (id) => {
const { todos } = this.state;
let i = todos.findIndex(todo => todo.id === id);
let status = todos[i].completed
let updatedTodo = {
...todos[i],
completed: !status
}
this.setState({
todos: [
...todos.slice(0, i),
updatedTodo,
...todos.slice(i + 1)
]
});
}
虽然这确实有效,但我想知道是否有更简洁的方法可以达到相同的结果;我尝试使用 Object.assign(),但这没有成功,因为我的“todos”是一个数组,而不是一个对象。请赐教我更好的代码!
最佳答案
最好使用update function确保您不会使用过时的数据:
onUpdate = (id) => {
this.setState(prevState => {
const copy = [...prevState.todos];
const index = copy.findIndex(t => t.id === id);
copy[index].completed = !copy[index].completed;
return { todos: copy }
})
}
关于javascript - 如何更新组件状态中的对象数组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50553606/