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

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用react將屬性添加到屬于某個狀態的列表中

使用react將屬性添加到屬于某個狀態的列表中

當年話下 2019-04-26 18:15:05
我的狀態有這個json變量:this.state = {         type:         {             name: '',             type2: {                 atribute: '',                 parameter: [                     {                         value: '',                         classtype: ''                     }                 ],                 name: '',                 atribute1: '',                 atribute2: ''             }         }     }我想要做的是在我的參數列表中添加元素,這些元素在開始時是空的。我做的是這樣的: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]             }         }     }))  }但是在執行最后一行代碼時出現以下錯誤:未捕獲的TypeError:在傳播列表時無效傳播非可迭代實例的嘗試我不知道為什么這不起作用,因為參數確實是一個列表。
查看完整描述

2 回答

?
長風秋雁

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

如果this.state.type.type2.parameter是數組,那么為什么要在其上引用屬性:

let newParam = {
    value: this.state.type.type2.parameter.value,
    classtype: this.state.type.type2.parameter.classtype};

我不認為你的狀態是你所期望的結構,似乎你在代碼中的某個點上用一個對象替換該數組。我建議使用react-devtools幫助您跟蹤狀態的變化。

這不是一個答案,但我強烈建議使用immerjs來做這些純嵌套更新。我幾乎從不建議添加第三方庫作為解決方案,但immer是輕量級的,改變生活。它導出一個名為produce的函數,并使用一個名為Proxy的概念來執行作為突變編寫的純更新。

使用immer(并修復了您的錯誤),您的代碼變為:

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%純。


查看完整回答
反對 回復 2019-05-17
?
jeck貓

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

試試這個 :

 this.setState(prevState => {
        return {
            ...prevState,
            type: {
                ...prevState.type,
                type2: {
                    ...prevState.type.type2,
                    parameter: [...prevState.type.type2.parameter, newParam]
                }
            }
        }
    )


查看完整回答
反對 回復 2019-05-17
  • 2 回答
  • 0 關注
  • 702 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號