第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

反應(yīng)狀態(tài) - 更新嵌套數(shù)組中對(duì)象的屬性

反應(yīng)狀態(tài) - 更新嵌套數(shù)組中對(duì)象的屬性

元芳怎么了 2021-06-15 11:14:41
我有一個(gè) React 應(yīng)用程序，其界面允許用戶選擇日期和時(shí)間段。我有一個(gè)維護(hù)狀態(tài)的頂級(jí)對(duì)象，它可能如下所示：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     }  }]}當(dāng)用戶單擊某個(gè)時(shí)間段時(shí)，我想將該selected屬性更新為true.到目前為止，我有這個(gè)，但我認(rèn)為我正在改變狀態(tài)，這是不好的做法。slotClicked(day_index, slot_index) {  let state = this.state.days[day_index].time_slots[slot_index].selected = true;  this.setState({state});}我如何以有效的（在重新渲染方面）和不可變的方式更新狀態(tài)？
查看完整描述

3 回答

?
森欄

TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超5個(gè)贊

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


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});

}

如果您不深度克隆您的數(shù)組，則該time_slots數(shù)組將通過引用進(jìn)行復(fù)制，并且對(duì)其進(jìn)行突變會(huì)改變?cè)紨?shù)組的狀態(tài)。


查看完整回答
反對(duì) 回復(fù) 2021-06-18
?
江戶川亂折騰

TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超5個(gè)贊

您可以使用Array.map函數(shù)作為，


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);

                });

            }

        });

    }


查看完整回答
反對(duì) 回復(fù) 2021-06-18
  • 3 回答
  • 0 關(guān)注
  • 160 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)