我在react中使用以下代码来更新状态。state最后应该是这样的：
this.state.output = {
'abc':{
value: 10
},
'cde':{
value: 20
}
// new values are added and old kept (if not overwritten)
}
我的处理程序：
handleChange = (data) => {
this.setState(prevState => {
return {
output: {
[data.id]: { ...data },
},
}
})
}
当数据handleChage以新的data.id传入时，output不添加新的key，而是完全替换其所有内容
this.state.output = {
'new':{
value: 2
},
}
我还需要保留以前的密钥。我的代码有什么问题？
因为您忘记添加其他属性及其值，请像这样更新对象：
handleChange = (data) => {
this.setState(prevState => {
return {
output: {
...prevState.output, // notice this
[data.id]: { ...data },
},
}
})
}
或者干脆：
handleChange = (data) => {
this.setState(prevState => ({
output: {
...prevState.output,
[data.id]: { ...data },
},
})
)}
对象传播语法是最近的规范。这是它的文档：using-object-spread-operator
下面的代码使用Object.assign方法代替：
handleChange = (data) => {
this.setState(prevState => ({
output: Object.assign({}, prevState, {
[data.id]: data
})
})
)}