使用React JS计算字符串数组中的重复项

Question

以下是我在React应用程序中使用chart js创建条形图的代码。在这里，它创建了一个条形图，其中包含数组中的所有数据。但是，我只想更改此代码，以给出该目的地的x轴-目的地、y轴-出现次数的输出，因为它有许多重复的目的地。我搜索了这个问题的方法，但找不到正确的解决方案。有人能帮我做这个吗？

const dataArrayY4 = [];
res.data.map(item => {
dataArrayY4.push(item.time)
})
const dataArrayX4 = []
res.data.map(item => {
dataArrayX4.push(item.destination)
})
this.setState({
data4: dataArrayY4,
labels4: dataArrayX4,
});

Answer 1

这可以按如下方式完成：

const res = {
data: [
{ time: 1, destination: 'A'},
{ time: 3, destination: 'A'},
{ time: 2, destination: 'B'}    
]
};
let tmp4 = [];
res.data.map((o, i) => {
const existing = tmp4.find(e => e.destination == o.destination);
if (existing) {
existing.time += o.time;
} else {
tmp4.push({time: o.time, destination: o.destination});
}
})
this.setState({
data4: tmp.map(o => o.time);
labels4: tmp.map(o => o.destination);
});

用CCD_ 1代替CCD_。

Answer 2

我会让代码更有效率。dataArrayY4不是一个数组，而是一个具有值的键和每个值的出现次数的对象。通过这种方式，您可以统计res.data 中所有项目的出现次数

const dataArrayY4 = {};
res.data.map(item => {
dataArrayY4[item.destination] = (dataArrayY4[item.destination] || 0) + 1
})

const dataArrayX4 = []
res.data.forEach(item => {
dataArrayX4.push(item.destination)
})
this.setState({
data4: dataArrayY4,
labels4: dataArrayX4,
});

然后，如果要查找某个特定值的出现使用这个，例如斯里兰卡

this.state.data4['Sri Lanka']