如何根据平均评分填写评论图标？答案

【问题标题】：How can I fill review icons depending on average rating?如何根据平均评分填写评论图标？
【发布时间】：2020-06-08 15:03:35
【问题描述】：

我已经建立了 NodeJS 和 React 项目。在项目中，每个用户都有自己的列表，每个列表都有自己的评论。现在我得到评论数，然后计算平均评论。现在我想将图标填充到我收到的任何平均数字。因此，例如，如果平均评论为 3，则将填充 3 星，而不会填充 2 星。我将星形图标作为一个组件，我唯一需要做的就是isFilled={true} 来填充图标。

我如何获得平均评分：

// Get average number of all ratings
const arrAvg = arr => arr.reduce((a, b) => a + b, 0) / arr.length;
const getAvgRating =
  reviews.length > 0 ? arrAvg(reviews.map(review => review.attributes.rating)) : 0;
const avgRating = parseInt(getAvgRating); // This is my average review number

这是我的评论星形图标（我想根据平均评分的数量填充每个星形）：

 <IconReviewStar isFilled={true} /> // isFilled will mark icon as filled
 <IconReviewStar isFilled={true} />
 <IconReviewStar isFilled={true} />
 <IconReviewStar />
 <IconReviewStar />

有什么简单的解决方法吗？所以我可以省去编写不必要的代码。任何帮助都将意味着，即使它只是一篇可以为我指出正确答案的文章。

最好，阿列克萨

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

尝试迭代并有条件地将道具渲染到您的avgRating。

const totalFilled = Math.ceil(avgRating);
const totalStars = 5;

const ReviewBar = () =>
  [...Array(totalStars).keys()].map((key) => (
    <IconReviewStar key={key} isFilled={key < totalFilled} />
  ));

【讨论】：

【解决方案2】：

如果平均评分为3，则使用.map()函数，创建IconReviewStar组件并设置isFilled={true}，只要索引小于平均评分

const avgRating = 3;

const iconComponents = [...new Array(5).fill(0)]
        .map((_, i) => <IconReviewStar key={i} isFilled={i < avgRating}/>);

iconComponents 将是一个包含 5 个 IconReviewStar 组件的数组，其中 3 个已填充。

【讨论】：