2 回答

TA貢獻(xiàn)1843條經(jīng)驗(yàn) 獲得超7個(gè)贊
如果你的瀏覽器支持 spread syntax,那么更新的對(duì)象可以通過(guò)該語(yǔ)法和Array#reducemodels
獲得,如下所述:
onButtonClick(e){
? const key = e.target.getAttribute('model');
??
? // Get reference to current models object in state
? const models = this.state.models;
??
??
? // Compose new state object by..
? const state = {?
? ? models :?
? ? Object
? ? .keys(models) // Get list of keys in model
? ? .reduce((result, k) => {?
? ? ? // Reduce keys to object of key/value pairs
? ? ? // where key match is set to true
? ? ? return { ...result, [k] : key === k };
? ? }, {})
? }
? this.setState(state)
}

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超2個(gè)贊
您可以使用計(jì)算對(duì)象屬性來(lái)使其工作。this.setState進(jìn)行淺合并,您將不得不將嵌套的屬性展開(kāi)一層深。
onButtonClick(e){
const key = e.target.getAttribute('model');
this.setState({
models:{
// spread all the properties for models
...this.state.models,
[key]: true // set the key prop to false
}
})
}
如果我們想確保其他屬性始終為假,則在設(shè)置狀態(tài)之前覆蓋這些值。
onButtonClick(e){
const key = e.target.getAttribute('model');
const updatedModels = Object.entries(this.state.models)
.reduce((memo, [currKey]) => {
if(currKey === key) {
memo[currKey] = true;
} else {
memo[currKey] = false;
}
return memo;
}, {});
this.setState({
models: updatedModels
})
}
添加回答
舉報(bào)