React函数组件中AiFillStar无法显示评分的问题求助

平均评分计算逻辑可能出错 #

• 先核对reviews数组的字段：每条评论的评分字段是不是rating？如果字段名是score或者其他，计算时就会拿不到正确数值，导致平均分始终为0，自然看不到对应星级。
• 要过滤无效评分：比如有些评论可能未填写评分（值为null/undefined），或者评分不在1-5的范围内，计算时要排除这些项，否则会拉低平均分甚至得到NaN。示例代码：

const validReviews = reviews.filter(r => typeof r.rating === 'number' && r.rating >= 1 && r.rating <=5);
const averageRating = validReviews.length > 0 
  ? validReviews.reduce((sum, item) => sum + item.rating, 0) / validReviews.length 
  : 0;

星级渲染逻辑存在漏洞 #

• 检查实心星的判断条件：比如渲染5颗星时，判断每颗星是否填充的逻辑是否正确。如果写成i < averageRating而不是i <= averageRating，会少显示一颗星；如果平均分是小数（比如3.6），还需要处理半星的情况，否则只会显示3颗实心星，剩下2颗空心。示例正确的基础渲染逻辑：

{[1,2,3,4,5].map(i => (
  <AiFillStar 
    key={i} 
    style={{ color: i <= averageRating ? '#ffc107' : '#e0e0e0', fontSize: '16px' }} 
  />
))}

• 还要检查星星的样式：如果颜色和背景色一致（比如白色星星放在白色背景上），或者设置了display: none，也会导致看不见。

useState使用可能导致状态不同步 #

• 如果你用useState存储平均分，一定要在reviews变化时重新计算：需要借助useEffect，并把reviews加入依赖数组，否则当外部传入的reviews更新时，组件不会重新计算平均分，星级显示的还是旧数据。示例：

const [averageRating, setAverageRating] = useState(0);

useEffect(() => {
  const validReviews = reviews.filter(r => typeof r.rating === 'number' && r.rating >=1 && r.rating <=5);
  const avg = validReviews.length > 0 
    ? validReviews.reduce((sum, item) => sum + item.rating, 0) / validReviews.length 
    : 0;
  setAverageRating(avg);
}, [reviews]);

• 其实平均分属于派生状态，完全可以直接在渲染时计算，不需要用state存储，这样能避免状态不同步的问题，代码更简洁。

React Icons引入或渲染问题 #

• 确认组件引入是否正确：必须是import { AiFillStar } from 'react-icons/ai';，不要写错组件名称（比如AiStarFill这类错误写法）。
• 检查组件是否在JSX中正确渲染：有没有把星星组件放在return的有效JSX结构里，有没有被其他元素完全遮挡。

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