React中使用Array.fill实现星级评分仅显示1颗星问题咨询

问题原因 #

1. 你传入组件的rating参数大概率是字符串类型：当Array()构造函数接收字符串类型的数字（比如"4"）时，会生成长度为1、首个元素为该字符串的数组，而非你预期的长度等于数值的空数组，最终仅循环渲染1次，只显示1颗星。
2. 你用块级标签<p>包裹每颗星星，块级元素默认独占整行，若父容器有高度限制，也会导致你只能看到最上方的1颗星。
3. 循环渲染未加key属性，会引发React更新阶段的渲染异常。

修复后的代码 #

import React from 'react'

function Rating(props) {
    const {rating, numReviews} = props;
    // 转换为数字并取整，确保生成对应长度的数组
    const starCount = Math.floor(Number(rating));
    return (
        <div className="product_rating">
           {Array(starCount)
            .fill()
            .map((_, index) => (
              <span key={index}>🌟</span>
            ))
           }
           <span> {numReviews} 条评价</span>
        </div>
    )
}

export default Rating;

修复说明 #

• 新增类型转换逻辑：先把rating转为数字类型，再取整数部分，保证Array()接收合法的正整数参数，生成对应长度的数组，同时兼容了传入小数评分的场景，避免数组创建报错
• 将块级元素<p>替换为行内元素<span>，让星星横向排列
• 给循环生成的元素添加唯一key属性，符合React渲染规范

内容的提问来源于stack exchange，提问作者Navreet Kaur