如何使用功能組件渲染星形反應圖標

Question

我在 React 上學習功能組件。 我正在創建一個組件，用於獲取企業的平均評分，然后以星號顯示。 我不確定我是否正確使用 setState 或正確返回反應圖標。 現在沒有錯誤，道具包括評論（有很多評論的對象）。

tldr，為什么 aiFillStars 沒有顯示評級/平均星數。

先感謝您。

import React, { useState, useEffect } from 'react';
import {AiFillStar } from "react-icons/ai";

export default function Star(props) {
    const [rating, setRating] = useState(null);

    useEffect(() => {
        getAverageRating();
        // distributeStars();
    }, [rating]);

    const getAverageRating = () => {
        let totalStars = 0;
        props.reviews.forEach(review => {totalStars += review.rating});
        let averageStars = Math.ceil(totalStars / props.reviews.length);
        setRating(averageStars);
    }

    return (
        <div>
            {Array(5).fill().map((_, i) => {
                const ratingValue = i + 1;
                <div>
                    <AiFillStar
                            className='star'
                            color={ratingValue <= rating ? "#ffc107" : "#e4e5e9"}
                            size={25} />
                </div>
            })}
        </div>
   );
};

Answer 1

它很可能不顯示任何內容，因為您沒有從array.map()返回任何內容

{
  Array(5)
    .fill()
    .map((_, i) => {
      const ratingValue = i + 1;
      return (
        <div>
          <AiFillStar
            className="star"
            color={ratingValue <= rating ? "#ffc107" : "#e4e5e9"}
            size={25}
          />
        </div>
      );
    });
}