Question

我已经设置了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 />

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

最好，阿列克萨

Answer 1

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

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

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

Answer 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个组件已填充。

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

2 个答案: