遍历对象、解构并推送到 React 状态数组
Iterate through objects, destructure, and push to React state array
我有一个购物清单,格式如下:
{
'someUniqueId': {
'category': 'fruit',
'name': 'apple',
'checked': 'true'
},
'someUniqueId': {
'category': 'protein',
'name': 'beef',
'checked': 'true'
}
}
我想做的是遍历这个列表,解构每个杂货对象,然后插入到 React 状态数组中。这个新数组将具有以下格式:
data: [
{
category: 'fruit',
name: 'apple',
header: false,
id: 'someUniqueId
},
{
category: 'protein',
name: 'beef',
header: false,
id: 'someUniqueId
},
]
我完全不知道如何开始使用它,所以非常感谢您的帮助!
使用Object.keys
从对象中获取所有键的数组。然后使用数组 map
并在回调函数内部创建具有所需键值对的对象和 return it
let obj = {
'someUniqueId': {
'category': 'fruit',
'name': 'apple',
'checked': 'true'
},
'someUniqueId1': {
'category': 'protein',
'name': 'beef',
'checked': 'true'
}
}
let data = Object.keys(obj).map(function(item) {
return {
category: obj[item].category,
name: obj[item].name,
header: false,
id: item
}
})
console.log(data)
您需要做的是使用 Object.entries
将对象键和值作为数组获取,然后映射到它们
let obj = {
'someUniqueId': {
'category': 'fruit',
'name': 'apple',
'checked': 'true'
},
'someUniqueId1': {
'category': 'protein',
'name': 'beef',
'checked': 'true'
}
}
//console.log(Object.entries(obj))
const res = Object.entries(obj).map(([key,value]) => {
return {
...value,
id: key
}
})
console.log(res)
应该不需要遍历对象,只需在新数组中解构对象即可。
this.state = {
groceryArray: []
};
const groceryObject = {
'someUniqueId': {
'category': 'fruit',
'name': 'apple',
'checked': 'true'
},
'someUniqueId': {
'category': 'protein',
'name': 'beef',
'checked': 'true'
}
};
this.setState(prevState => {...prevState, groceryArray : [...prevState.groceryArray, ...groceryObject]);
我有一个购物清单,格式如下:
{
'someUniqueId': {
'category': 'fruit',
'name': 'apple',
'checked': 'true'
},
'someUniqueId': {
'category': 'protein',
'name': 'beef',
'checked': 'true'
}
}
我想做的是遍历这个列表,解构每个杂货对象,然后插入到 React 状态数组中。这个新数组将具有以下格式:
data: [
{
category: 'fruit',
name: 'apple',
header: false,
id: 'someUniqueId
},
{
category: 'protein',
name: 'beef',
header: false,
id: 'someUniqueId
},
]
我完全不知道如何开始使用它,所以非常感谢您的帮助!
使用Object.keys
从对象中获取所有键的数组。然后使用数组 map
并在回调函数内部创建具有所需键值对的对象和 return it
let obj = {
'someUniqueId': {
'category': 'fruit',
'name': 'apple',
'checked': 'true'
},
'someUniqueId1': {
'category': 'protein',
'name': 'beef',
'checked': 'true'
}
}
let data = Object.keys(obj).map(function(item) {
return {
category: obj[item].category,
name: obj[item].name,
header: false,
id: item
}
})
console.log(data)
您需要做的是使用 Object.entries
将对象键和值作为数组获取,然后映射到它们
let obj = {
'someUniqueId': {
'category': 'fruit',
'name': 'apple',
'checked': 'true'
},
'someUniqueId1': {
'category': 'protein',
'name': 'beef',
'checked': 'true'
}
}
//console.log(Object.entries(obj))
const res = Object.entries(obj).map(([key,value]) => {
return {
...value,
id: key
}
})
console.log(res)
应该不需要遍历对象,只需在新数组中解构对象即可。
this.state = {
groceryArray: []
};
const groceryObject = {
'someUniqueId': {
'category': 'fruit',
'name': 'apple',
'checked': 'true'
},
'someUniqueId': {
'category': 'protein',
'name': 'beef',
'checked': 'true'
}
};
this.setState(prevState => {...prevState, groceryArray : [...prevState.groceryArray, ...groceryObject]);