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

Z时代
2024-01-10
分类：问答

我想在阵营无法创建一个对象数组结构和增加值到数组

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

为什么是关键值对被添加到状态两次？

回答：

修改您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}); 
}

回答：

编辑：请注意，您的问题中的示例不是一个有效的JS对象，因为您有一些不匹配的括号。

如果你有一个看起来像这样的结构。

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

要追加到嵌套狗数组，你可以这样做：object.items.dogs.push({ name: "Snoopy" })

回答：

如果给你一个动态密钥，那么你可以参考的对象键用括号：

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