将prop值从父组件传递到子组件，并根据父prop值映射子对象

Question

我有一个名为产品卡的上级组件，其中根据产品ID显示产品详细信息。我还有一个名为Rating的子组件，在其中检索了特定产品ID的评级值。

DisplayRating组件已传递到传递产品ID的父组件。

<DisplayRating pID={product.product._id} />

在DisplayRating组件中，我从数据库中检索评级列表并进行迭代。我现在想要的是将正确的值（{ratings.avg}）传递给特定的产品ID。可以使用{ratings._id}检索数据库中的产品ID。我现在所有产品都获得相同的额定值，我该如何迭代产品ID，然后将正确的额定值传递给父组件中的产品？

  const [allRatings, setRatings] = useState([]);

  const loadRatings = () =>{
         getRatings().then(content => {
             if(content.error){
                 console.log("error");
             }else{
                 setRatings(content);
             }
         })
    }


      return(

                    <div >

                        {allRatings.map((ratings, index ) => (
                            <div key={index}>
                                <StarRatingComponent
                                    name="rate1"
                                    starCount={5}
                                    size="10"
                                    value={ratings.avg}
                                    className="mr-5"
                                    pID

                                />
                            </div>
                        ))}
                    </div>

            )

我从数据中获得的数据包含3个变量。 _id和平均_id是产品ID，而avg是特定ID的平均星级。我正在迭代DisplayRating以通过特定产品ID的平均星级，但没有成功

这是我的产品卡组件的结构，“显示评分”组件是可见的星星。根据产品ID，将显示每个产品卡组件。我要实现的目标是根据唯一的产品ID在产品组件中显示评分值