React/JavaScript中如何处理含小数的数组循环实现星级评分

我开发LMS应用时遇到星级评分的问题：从数据库获取的平均评分为整数（如4）时，能正常显示4个实心星+1个空心星；但评分为小数（如3.5）时代码报错。当前代码片段如下：

const average_rating = data.aggregate.avg.rating;

<Flex alignItems="center" justify="start">
    {Array.from(Array(average_rating).keys()).map((id) => {
      return <Star key={id} fillColor="#EACA4E" />;
    })}

    {Array.from(Array(5 - average_rating).keys()).map((id) => {
      return <Star key={id} fillColor="#e2e8f0" />;
    })}
</Flex> 

报错原因 #

Array()构造函数要求传入的length参数必须是整数，当average_rating为小数时，会触发非法参数错误。

解决方案：拆分整数星、半星、空心星渲染 #

核心思路是把评分拆成全实心星、半实心星（如果小数部分≥0.5）、空心星三部分分别渲染：

const average_rating = data.aggregate.avg.rating;
const fullStars = Math.floor(average_rating); // 提取全实心星数量，例：3.5取3
const hasHalfStar = average_rating - fullStars >= 0.5; // 判断是否需要显示半星
const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0); // 计算剩余空心星数量

<Flex alignItems="center" justify="start">
    {/* 渲染全实心星 */}
    {Array.from(Array(fullStars).keys()).map((id) => (
        <Star key={`full-${id}`} fillColor="#EACA4E" />
    ))}

    {/* 渲染半实心星（如果需要） */}
    {hasHalfStar && (
        <Star 
            key="half" 
            fillColor="#EACA4E" 
            style={{ clipPath: 'inset(0 50% 0 0)' }} // 通过clip-path实现半填充效果
        />
    )}

    {/* 渲染空心星 */}
    {Array.from(Array(emptyStars).keys()).map((id) => (
        <Star key={`empty-${id}`} fillColor="#e2e8f0" />
    ))}
</Flex>

补充说明 #

• 如果你的Star组件自带半填充属性（比如half={true}），可以替换掉clip-path样式，直接用组件属性实现更优雅。
• 给每个Star的key添加前缀（full-、empty-），避免不同分组的星出现key重复问题。

内容的提问来源于stack exchange，提问作者Venkata Penumatsa