无法创建一个对象数组结构和增加值到数组

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这是