Question

我有一个具有以下格式的购物清单：

{
    '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
    },
]

我对如何开始使用该工具非常迷惑，因此不胜感激！

Answer 1

使用Object.keys从Object获取所有键的数组。然后使用数组map并在回调函数内部创建具有必需键值对的对象并返回它

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)

Answer 2

应该不需要遍历对象，只需在新数组中分解对象即可。

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

Answer 3

您需要做的是使用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)

遍历对象，解构并推送到React状态数组

3 个答案: