首頁猿問 React...

React JS：將嵌套對象的所有值設置為 false，除了一個

JavaScript

夢里花落0921 2023-06-15 17:46:08

我的組件具有以下狀態：this.state = { models: { model1: false, model2: true, model3: false, model4: false }, state1: 'somevalue', state2: 5, state3: false}當onButtonClick()函數被調用時，我希望所有的值this.state.models都是false除變量對應的值之外的所有值key：onButtonClick(e){ const key = e.target.getAttribute('model'); this.setState({ models:{ //set all states to false except for the key } })}我怎樣才能做到這一點？

查看完整描述

2 回答

藍山帝景

TA貢獻1843條經驗獲得超7個贊

如果你的瀏覽器支持 spread syntax，那么更新的對象可以通過該語法和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)

}

反對回復 2023-06-15

慕婉清6462132

TA貢獻1804條經驗獲得超2個贊

您可以使用計算對象屬性來使其工作。this.setState進行淺合并，您將不得不將嵌套的屬性展開一層深。

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

}

})

}

如果我們想確保其他屬性始終為假，則在設置狀態之前覆蓋這些值。

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

})

}

反對回復 2023-06-15

2 回答
0 關注
201 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

React JS：將嵌套對象的所有值設置為 false，除了一個

React JS：將嵌套對象的所有值設置為 false，除了一個

2 回答

添加回答

React JS：將嵌套對象的所有值設置為 false，除了一個