已解決430363個問題，去搜搜看，總會有你想問的

反應狀態 - 更新嵌套數組中對象的屬性

首頁猿問反應狀態 - 更新嵌套數組中對象的屬性

反應狀態 - 更新嵌套數組中對象的屬性

JavaScript

元芳怎么了 2021-06-15 11:14:41

我有一個 React 應用程序，其界面允許用戶選擇日期和時間段。我有一個維護狀態的頂級對象，它可能如下所示：this.state = { days: [{ date: '12-13-2022', time_slots: [{ start: '10 am', end: '11 am', selected: false },{ start: '1 pm', end: '3 pm', selected: false }] }, { date: '12-14-2022', time_slots: [{ start: '10 am', end: '11 am', selected: false } }]}當用戶單擊某個時間段時，我想將該selected屬性更新為true.到目前為止，我有這個，但我認為我正在改變狀態，這是不好的做法。slotClicked(day_index, slot_index) { let state = this.state.days[day_index].time_slots[slot_index].selected = true; this.setState({state});}我如何以有效的（在重新渲染方面）和不可變的方式更新狀態？

查看完整描述

3 回答

森欄

TA貢獻1810條經驗獲得超5個贊

與其他答案相反，您必須深度克隆您的陣列：

slotClicked(day_index, slot_index) {

// If you prefer you can use lodash method _.cloneDeep()

const newDays = JSON.parse(JSON.stringify(this.state.days));

newDays[day_index].time_slots[slot_index].selected = true;

this.setState({days: newDays});

}

如果您不深度克隆您的數組，則該time_slots數組將通過引用進行復制，并且對其進行突變會改變原始數組的狀態。

反對回復 2021-06-18

江戶川亂折騰

TA貢獻1851條經驗獲得超5個贊

您可以使用Array.map函數作為，

slotClicked(day_index,slot_index){

let current_state = this.state;

this.state.days.map((days,days_index) => {

if(days_index===day_index){

// console.log("day",days);

let newSlot = '';

days.time_slots.map((time_slot,slots_index)=>{

if(slots_index===slot_index){

// console.log("time",time_slot);

newSlot = Object.assign({},time_slot,{selected:true});

}

})

// console.log("new slot",newSlot);

days.time_slots[slot_index] = newSlot;

this.setState({days:current_state},()=>{

console.log(this.state);

});

}

});

}

反對回復 2021-06-18

3 回答
0 關注
179 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

反應狀態 - 更新嵌套數組中對象的屬性

反應狀態 - 更新嵌套數組中對象的屬性

3 回答

添加回答