在ReactJS中动态创建雷达图

Question

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

雷达数据格式如下：

composeT

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

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

因此，我考虑过要针对每个地图进行一些操作，以便可以格式化数据并最终得到第一个示例所示的内容，请注意，我有很多评论，每个评论都会被看到作为雷达海图数据结构中的dataA或dataB（或C ...）。

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

Answer 1

精简后，您不需要每次使用，它使您的代码更具功能性和不变性

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