React中react-simple-star-rating组件无法渲染API评分值问题

针对你遇到的react-simple-star-rating组件设为readonly={true}后无法显示自定义评分值的问题，核心原因是只读模式下的属性使用错误，以下是具体解决方法：

• 使用正确的属性传递值：在只读模式下，组件不支持ratingValue属性，需要用initialValue来设置初始评分，且必须传递数字类型的值，不能传字符串（比如initialValue={3}而非initialValue="3"）。
• 处理浮点评分值：组件默认支持半星显示，直接传入2.55这类浮点值即可，无需额外处理（如果半星不显示，可显式设置allowHalfIcon={true}，该属性默认开启）。

示例代码 #

import { Rating } from "react-simple-star-rating";

// 假设product是你的API返回数据对象
function ProductRating({ product }) {
  // 确保product.rating是数字类型，避免undefined
  const ratingValue = typeof product.rating === 'number' ? product.rating : 0;

  return (
    <Rating
      readonly={true}
      initialValue={ratingValue}
      // 可选自定义配置
      size={24}
      iconCount={5}
      allowHalfIcon={true}
    />
  );
}

额外排查点 #

1. 检查组件版本：如果是v3及以下旧版本，只读模式下可能需要用rating属性替代initialValue，可查看package.json中的版本号对应调整。
2. 确认数据有效性：通过console.log(product.rating)检查是否存在值，避免传入undefined或null导致组件显示异常。
3. 不要同时混用ratingValue和initialValue：只读模式下只保留initialValue即可，冲突会导致属性失效。

内容的提问来源于stack exchange，提问作者Saran Pariyar