Wie man mit Komponenten in React einen Mehrwert erhält

Ich bin neu in Reactjs und arbeite an einem bestehenden Projekt. Ich versuche, eine Produktbewertung mit der Komponente zu erhalten, aber gerade zeigt mir meine Konsole 0 an. Wie kann ich das tun?

Hier ist meine Datei "pages/[slug].js"

import React, { useContext, useState, useEffect } from 'react'
import { useRouter } from 'next/router'
import Error from 'next/error'
import Image from 'next/image'
import ProductThubnailSliderSection from '../src/components/product/ProductThubnailSliderSection'
import RealtedProductsSection from '../src/components/product/RealtedProductsSection'
import ProductReviewSection from '../src/components/product/ProductReview'
import FlatRateSection from '../src/components/FlatRateSection'
import AddToCartButton from '../src/components/cart/AddToCartButton'
import {getProductExtraTag} from '../src/functions'
import WishListButton from '../src/components/wishlist/WishListButton'
import {AppContext} from '../src/components/context/AppContext'
import Link from 'next/link'
const Product = (props) => {
//const [productOverAllStarRating, setProductReviews] = useState(0) 
const [productOverAllStarRating, setProductOverAllStarRating] = useState(0)
 const router = useRouter()
 const { slug } = router.query
 const { wishListContext } = useContext( AppContext )
 if(props.error) {
 return (
 <Error statusCode={404} />
 )
 } else {
 const { product } = props
 const classToAddForAddToCart = "add-to-bag"
 let imageUrl = '/demo-product-img.png'
 let showProductThubnailSliderSection = false
 let relatedProducts = props.relatedProductsInfo
 let productImages
 if(product.images.length > 0) {
 showProductThubnailSliderSection = true
 imageUrl = product.images[0].src
 productImages = product.images.slice(1)
 }
console.log('Average rating is '+ setProductOverAllStarRating);

Hier ist meine Datei "ProductReview.js" in der Datei "src/components/product/ProductReview.js". Ich möchte wissen, wie ich eine durchschnittliche Bewertung oder ein Produkt erhalten kann und wie ich meine [slug.js]-Datei abrufen kann? Vielen Dank im Voraus

import React, { useContext, useState, useEffect } from 'react'
/* This example requires Tailwind CSS v2.0+ */
import { StarIcon } from '@heroicons/react/solid'
import cookie from 'js-cookie';
import Link from 'next/link'
import {AlertContext} from "../context/AlertContext";
import api from '../../../src/api';
import Pagination from '../../../utils/review-pagination'
function ProductReview( props ) {
 const authToken = cookie.get('token')
 const { pslug } = props
 const { showAlert, setShowAlert } = useContext( AlertContext )
 const [ratingValue, setValueRating] = useState(1)
 const [ratingQuality, setQualityRating] = useState(1)
 const [ratingPrice, setPriceRating] = useState(1)
 const [reviewText, setReviewText] = useState('')
 const [reviewTitle, setReviewTitle] = useState('')
 const [productOverAllStarRating, setProductOverAllStarRating] = useState(0)
 const [productOverAllRatingNumber, setProductOverAllRatingNumber] = useState(0)
 const [pagination, setPagination] = useState('')
 //const [ratingPrice, setPriceRating] = useState(0)
 const overallRating = 3
 //** Set rating for value **/
 const handleValueRating = ( event ) => {
 setValueRating(event.target.value);
 }
 //** Set rating for Quality **/
 const handleQualityRating = ( event ) => {
 setQualityRating(event.target.value);
 }
 //** Set rating for Price **/
 const handlePriceRating = ( event ) => {
 setPriceRating(event.target.value);
 }
 const handleReviewText = ( event ) => {
 setReviewText(event.target.value);
 }
 const handleReviewTitle = ( event ) => {
 setReviewTitle(event.target.value);
 }
 const [productReviews, setProductReviews] = useState([]);
 useEffect(() => {
 const getProductsReviews = async () => {
 let authKey = Buffer.from(process.env.API_AUTH_USER_ID_KEY+":"+process.env.API_AUTH_USER_SECRET_KEY).toString('base64')
 let dataToSend = {
 pslug: pslug,
 }
 const res = await fetch(process.env.API_PATH+'/get-product-reviewlist/', {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json',
 'Authorization': 'Basic '+authKey,
 },
 body: JSON.stringify(dataToSend),
 })
 const data = await res.json()
 if(data.success) {
 setProductReviews(data.data.reviews)
 setProductOverAllStarRating(data.data.overallRatingStar)
 setProductOverAllRatingNumber(data.data.overallRatingShow)
 setPagination(data.data.pagination)
 //const pagination = data.data.pagination
 } else {
 setProductReviews([])
 }
 }
 getProductsReviews();
 }, [pslug]);

Lösung des Problems

Ich dachte, hier [slug].jsist Ihre übergeordnete Komponente und ProductReviewist Ihr Kind, sodass Sie Ihren Wert von Kind zu Eltern weitergeben können, indem Sie wie folgt reagieren:

Zuerst [slug].jserstellen Sie eine Funktion handleAverage:

function handleAverage(val){
 console.log(val)
}

Übergeben Sie es als zweites propsan Ihre Stelle, ProductReviewan der Sie diese Komponente in Ihrem ``[slug].js verwendet haben

<ProductReview handleAverage={handleAverage} />

Drittens können Sie Ihre averagean diese Funktion in Ihrer ProductReviewKomponente übergeben:

function ProductReview(props,{handleAverage}){
.......
//here you can manipulate your average and then pass to handleAverage
// you can divide the all-star rate to product count... 
 handleAverage(productOverAllStarRating)
}