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

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

使用 react 將元素添加到屬于某個(gè)狀態(tài)的列表中

使用 react 將元素添加到屬于某個(gè)狀態(tài)的列表中

翻翻過去那場雪 2021-06-01 14:12:39
我的狀態(tài)中有這個(gè) json 變量:this.state = {        type:        {            name: '',            type2: {                atribute: '',                parameter: [                    {                        value: '',                        classtype: ''                    }                ],                name: '',                atribute1: '',                atribute2: ''            }        }    }我想要做的是將元素添加到我的參數(shù)列表中,該列表在開始時(shí)為空。我所做的是這樣的:addParams = () => {    let newParam = {        value: this.state.type.type2.parameter.value,        classtype: this.state.type.type2.parameter.classtype    };    /** */    this.setState(prevState => ({        type: {            // keep all the other key-value pairs of type            ...prevState.type,            type2: {                ...prevState.type.type2,                //this is supposed to add an element to a list                parameter: [...prevState.type.type2.parameter, newParam]            }        }    }))  }但是在執(zhí)行最后一行代碼時(shí)出現(xiàn)以下錯(cuò)誤:未捕獲的類型錯(cuò)誤:傳播列表時(shí)傳播不可迭代實(shí)例的嘗試無效我不知道為什么這不起作用,因?yàn)閰?shù)確實(shí)是一個(gè)列表。
查看完整描述

2 回答

?
慕少森

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

如果this.state.type.type2.parameter是一個(gè)數(shù)組,那么你為什么要引用它的屬性:


let newParam = {

    value: this.state.type.type2.parameter.value,

    classtype: this.state.type.type2.parameter.classtype

};

我不認(rèn)為您的狀態(tài)是按照您期望的方式構(gòu)建的,似乎您在代碼中的某個(gè)時(shí)刻用對象替換了該數(shù)組。我建議使用react-devtools來幫助您跟蹤狀態(tài)變化。


這不完全是一個(gè)答案,但我強(qiáng)烈建議使用immerjs來執(zhí)行這些純嵌套更新。我?guī)缀鯊牟唤ㄗh添加第三方庫作為解決方案,但 immer 是輕量級的,并且可以改變生活。它導(dǎo)出一個(gè)名為 generate 的函數(shù),并使用一個(gè)名為Proxy的概念來執(zhí)行編寫為突變的純更新。


使用 immer(并修復(fù)了您的錯(cuò)誤),您的代碼將變?yōu)椋?/p>


const newParam = {

    value: this.state.type.type2.parameter.value,

    classtype: this.state.type.type2.parameter.classtype

};


this.setState(produce(draftState => {

  draftState.type.type2.parameter.push(newParam);

}))

它可以讓你編寫更簡潔的代碼,更容易閱讀。是的,我知道這看起來像是一種突變,但它不是 100% 純的。


查看完整回答
反對 回復(fù) 2021-06-03
?
胡說叔叔

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

試試這個(gè) :


 this.setState(prevState => {

        return {

            ...prevState,

            type: {

                ...prevState.type,

                type2: {

                    ...prevState.type.type2,

                    parameter: [...prevState.type.type2.parameter, newParam]

                }

            }

        }


    )


查看完整回答
反對 回復(fù) 2021-06-03
  • 2 回答
  • 0 關(guān)注
  • 224 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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