反应.js:使用映射函数将对象数组转换为数组的数组取决于指定的属性

Question

我正在尝试重新格式化我的数据，使其可以适应React-Google-Chart的数据格式。

我的当前数据(保存为状态(是对象数组。 如下所示：

[ { _id: 5bbbb89a1a3ab50bcbd750a3,
desc: 'Market',
total: 4000,
amount: 1,
timestamp: '10/8/2018  4:05:45  PM' },
{ _id: 5bbbb8ac1a3ab50bcbd750a7,
desc: 'Deliver',
total: 2000,
amount: 1,
timestamp: '10/8/2018  4:06:03  PM' },
{ _id: 5bbbb8ac1a3ab50bcbd750a8,
desc: 'Market',
total: 4000,
amount: 1,
timestamp: '10/8/2018  4:06:03  PM' },
{ _id: 5bbbb8ac1a3ab50bcbd750a9,
desc: 'CPM',
total: 14000,
amount: 1,
timestamp: '10/8/2018  4:06:03  PM' },
{ _id: 5bbca335ef3899eb5fcbed51,
desc: 'Deliver',
total: 4000,
amount: 2,
timestamp: '10/9/2018  8:46:44  AM' }]

我正在尝试将它们映射到以下内容：

[["Market", "2"], ["Deliver", 3], ["CPM", 1"]]

到目前为止，我的工作，但没有按照我想要的方式工作。 让我解释一下：这条数据是从备份中发送的，它被保存为componentDidMount()的状态。而我传达数据格式的函数将在初始渲染中调用。所以问题来了，如果不使用map函数，这个函数会失败，因为在初始渲染期间，我的状态没有数据。我发现的一种方法是使用地图功能，所以我将进行初始渲染。

到目前为止，我拥有的：

mapBarArray(){
if(this.state.history.length > 0){
var barObject =[]
for(var eachItem of this.state.history){
var desc = eachItem.desc;
var amount = eachItem.amount;
if (!barObject[desc]) {
barObject[desc] = [
desc,
amount
];
}else{
barObject[desc][1] +=1
}
}
}
}

上面的代码将返回数组对象的数组。然后我可以将每个对象的值推送到我的最终数组中，从而得到我想要的。但是，此方法不使用 map，因此初始渲染失败。

What I need help with：使用map函数或任何类型的函数，以便在初始渲染期间传达它，以便我可以使用它来映射图表

Answer 1

这就像data.map (({amount, desc}) => [desc, amount])一样简单

编辑，我没有意识到您正在汇总金额。在这种情况下，我通常会做一些类似的事情：

map = data.reduce ((map, {amount, desc}) =>  {
map [desc] = ~~map[desc] + ~~amount;
return map;
},{});
Object.keys (map).map (k => [k,map[k]]);

let map = data.reduce ((map, {amount, desc}) =>  {
map [desc] = ~~map[desc] + ~~amount;
return map;
},{});
let mapped = Object.keys (map).map (k => [k,map[k]]);
console.log (JSON.stringify(mapped))

<script> 
var data = [ { _id: "5bbbb89a1a3ab50bcbd750a3",
desc: 'Market',
total: 4000,
amount: 1,
timestamp: '10/8/2018  4:05:45  PM' },
{ _id: "5bbbb8ac1a3ab50bcbd750a7",
desc: 'Deliver',
total: 2000,
amount: 1,
timestamp: '10/8/2018  4:06:03  PM' },
{ _id: "5bbbb8ac1a3ab50bcbd750a8",
desc: 'Market',
total: 4000,
amount: 1,
timestamp: '10/8/2018  4:06:03  PM' },
{ _id: "5bbbb8ac1a3ab50bcbd750a9",
desc: 'CPM',
total: 14000,
amount: 1,
timestamp: '10/8/2018  4:06:03  PM' },
{ _id: "5bbca335ef3899eb5fcbed51",
desc: 'Deliver',
total: 4000,
amount: 2,
timestamp: '10/9/2018  8:46:44  AM' }]
</script>