無法創建一個對象數組結構和增加值到數組

Question

我想在陣營

{ 
items: 
    {Dogs: [{name: "Snoopy"}, {name: "Lola"}, {name: "Sprinkles"}], 
    Cats: [{name: "Felidae"}, {name: "Garfiled"}, {name: "Cat in the Hat"}] 
} 

使用下面的函數來創建以下結構：

handleAddItem(s) { 

    var key = Object.keys(s)[0]; 
    var value = s[key]; 

    var allItems = {...this.state.items}; 

     allItems[key] = allItems[key]; 
     allItems[key].push({name: value}); 


    var ourItems = {}; 
     ourItems = allItems[key]; 
     ourItems.push({name: value }); 

    // console.log(ourItems); 
    // console.log(allItems); 

    this.setState({items: allItems}); 

} 

爲什麼是關鍵值對被添加到狀態兩次？

Answer 1

修改您handleAddItem喜歡的東西下面。您的方法缺少Object.keys(s)[0]。 Object.keys將返回一個數組，以便您獲得確切的密鑰並假定它始終是單個密鑰對象，則需要訪問第零個索引。

同樣在React中，不要試圖改變狀態變量，總是使用...或其他深層克隆技術創建數組或對象變量的深層副本。

handleAddItem(s) { 

//s comes in as an object key/value pair e.g. Dogs: Blackie  

    // Your expected key is at the 0th index 
    var key = Object.keys(s)[0]; 
    var value = s[key]; 

    // Cloning to prevent state mutations 
    var allItems = {...this.state.items}; 

    var allItems[key] = allItems[key] || []; 
     allItems[key].push({name: value }); 

    this.setState({items: allItems}); 
} 

Answer 2

編輯：請注意，您的問題中的示例不是一個有效的JS對象，因爲您有一些不匹配的括號。

如果你有一個看起來像這樣的結構。

const object = { 
    items: { 
    dogs: [], 
    cats: [] 
    } 
} 

要追加到嵌套狗數組，你可以這樣做：object.items.dogs.push({ name: "Snoopy" })

Answer 3

如果給你一個動態密鑰，那麼你可以參考的對象鍵用括號：

myObj['myKey'] = 'myValue' 

可以使用擴展語法添加數組和對象：

const myNewDogs = [{ 
 
    name: 'new dog 1' 
 
}, { 
 
    name: 'new dog 2' 
 
}]; 
 
const myNewCat = { 
 
    name: 'new cat' 
 
}; 
 
const items = { 
 
    dogs: [{ 
 
     name: 'dog 1' 
 
    }, 
 
    { 
 
     name: 'dog 2' 
 
    }, 
 
    { 
 
     name: 'dog 3' 
 
    } 
 
    ], 
 
    cats: [{ 
 
     name: 'cat 1' 
 
    }, 
 
    { 
 
     name: 'cat 2' 
 
    }, 
 
    { 
 
     name: 'cat 3' 
 
    } 
 
    ] 
 
}; 
 

 
items['dogs'] = [...items['dogs'], ...myNewDogs]; 
 
items['cats'] = [...items['cats'], {...myNewCat}]; 
 
console.log(items);

注意對象傳播語法的建議but already on stage 3這是