在 ReactJS 中动态创建雷达图

Question

我已经正确接收数据的端点，我的问题与我需要格式化数据以便我可以在雷达图中显示它的事实有关。

雷达数据格式如下所示：

[ { rating: "rating_field", dataA: data_value, dataB: data_value }...];

但我的数据结构是这样的：

reviews: [ {average_rating: 6.3,safety_rating: 6.3,comfort_rating: 7.1 ...} ]

所以，我想通过forEachs和地图做一些操作，这样我就可以格式化这些数据，最终得到类似于第一个示例的东西，只是为了清楚起见，我有一系列评论，每个评论都会被视为雷达图数据结构中的dataA或dataB(或C...(。

那么，有没有人有更好的主意，或者我应该坚持使用forEachs和地图吗？

Answer 1

当你有reduce时，你不需要forEach，它使你的代码更具功能性和不可变性

const api_data = {
reviews: [
{average_rating: 6.3,safety_rating: 6.3,comfort_rating: 7.1},
{average_rating: 6.4,safety_rating: 6.4,comfort_rating: 7.2},
{average_rating: 7.3,safety_rating: 7.3,comfort_rating: 8.1},
]
};
const letters = ["A", "B", "C", "D"];
const format_rating = (reviews) => (rating_name) =>
reviews.reduce((acc, review, index) =>
({...acc,
[`data${letters[index]}`]: review[rating_name]}),
{rating: rating_name});
const ratings = ["average_rating", "safety_rating", "comfort_rating"];
const radar_data = ratings.map(format_rating(api_data.reviews));
console.log(radar_data);