带有键和映射的 React / Redux 数组答案

【问题标题】：React / Redux array with keys and mapping带有键和映射的 React / Redux 数组
【发布时间】：2018-02-24 15:25:39
【问题描述】：

我有一个 API，它最初返回一个对象数组，每个对象都没有键，如下所示：

[
{
"id": 4311,
"title": "C43- Miami Bow Cabinet Handles High Quality Stainless Steel (Polished) Handles",
"liked": false
},
{
"id": 2235,
"title": "C43- Miami Bow Cabinet Handles High Quality Stainless Steel (Brushed) Handles",
"liked": false
}
]

但是，如果我可以使用 id 作为每个嵌套对象的键来存储这些数据，这将对我的应用程序有很大帮助，我已经更新了我的 API 以返回如下数据：

{
"2235": {
"title": "C43- Miami Bow Cabinet Handles High Quality Stainless Steel (Brushed) Handles",
"liked": false
},
"4311": {
"title": "C43- Miami Bow Cabinet Handles High Quality Stainless Steel (Polished) Handles",
"liked": false
}
}

但是现在我从反应中得到一个错误 - 'props.posts.map 不是一个函数'

我无法理解数据发生了什么变化，redux 不会为每个对象分配一个数字键，如果一个没有设置的话？

【问题讨论】：

这不再是一个数组了。但你可以使用Object.entries 或Object.keys
我想你想看看normalizr

标签： arrays json reactjs redux

【解决方案1】：

map 仅适用于此处描述的数组https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

但是，您可以使用 lodash 的 map 方法，该方法也适用于像您这样的标准化对象。

例如，您可以使用：

const newArray = _.map(data, (item, key) => {
  // key is the item's id
  return item
})

如果不能使用第 3 方模块，您可以使用 Object.keys 并获得相同的结果：

const newArray = Object.keys(data).map(key => data[key])

【讨论】：

【解决方案2】：

要以 id 作为每个嵌套对象的键存储此数据，您可以使用 reduce：

arr.reduce(function(map, obj){
  map[obj.id] = {
    title: obj.title,
    liked: obj.liked
}
 return map
}, {})

【讨论】：