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

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 从对象中获取所有键的数组。然后使用数组 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)

Answer 2

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

Answer 3

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

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

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

Iterate through objects, destructure, and push to React state array

javascript

reactjs

react-native

destructor