React js 组件 - 平均函数工作出现问题 - 我正在使用 db.json 假 api 调用

Question

我在 localhost:3000 上使用假 db.json 并在另一台服务器上运行react.js。React.js 代码的新内容。我需要获取 db.json 文件中评论星级的平均值。这是破坏网站的代码功能......    const getAverage = (reviews) => {        reviews.map((review) => {            return review.stars.reduce((a.review.stars, b.review.stars => (a.review.stars + b.review.stars), 0) / review.stars.length;        });    };我调用它的方式总是有语法错误......<div><p className="totalReviewsTally">Average: {getAverage(reviews.stars)} {reviews.length}</p></div>我的组文件header.jsimport React, {useState, useEffect} from "react";import './index.css';import './images/gup_logo.svg';import './images/gup_logo_text.svg';import './images/mapMarker.svg';import './images/solidStar.svg';import './images/emptyStar.svg';import './images/halfStar.svg';import './images/makeFaveShop.svg';import './images/unFaveShop.svg';import './images/contactButton.svg';import './images/shopCart.svg';import { Link } from "@reach/router";const Header = (props) => {    const [shopOwnerInfo, setShopOwnerInfo] = useState([]);    const [reviews, setReviews] = useState([]);    useEffect(() => {        const getJsonOwnerData = async () => {            const response = await fetch(`http://www.localhost:3000/shopOwner/1`);            const responseShopOwner = await response.json();            setShopOwnerInfo(responseShopOwner);        };        const getReviews = async () => {            const response = await fetch(`http://www.localhost:3000/reviews`);            const reviewsResponse = await response.json();            setReviews(reviewsResponse);        };        getReviews();        getJsonOwnerData();    }, []);    const getAverage = (reviews) => {        reviews.map((review) => {            return review.stars.reduce((a.review.stars, b.review.stars => (a.review.stars + b.review.stars), 0) / review.stars.length;        });    };

Answer 1

简单的方法，一步步处理。

const getAverage = (reviews) => {

    let TotalStars = reviews.reduce((prev, curr) => (curr.stars + prev), 0)

    // TotalStars is 3.6666 

    // below use any one of them averageStars

    // let averageStars = Math.round(TotalStars/reviews.length);  // output 4

    // let averageStars = Math.floor(TotalStars/reviews.length);  // output 3

    let averageStars = Math.floor((TotalStars/reviews.length)*10)/10;// output 3.6

    return averageStars;

};

<div>

    <p className="totalReviewsTally">Average: {getAverage(reviews)} {reviews.length}</p>

</div>

Answer 2

您忘记return了评论getAverage，我已尝试解决一些问题，如果这仍然不起作用，请告诉我。

根据你的评论

Reviews = [ { "text": "太可爱了，喜欢它！", "stars": 4, "id": 1 }, { "text": "手工制作很可爱，但第一次洗就褪色了。", "stars": 2, "id": 2 }, { "text": "给我最好的朋友的第一个孩子的好礼物。", "stars": 5, "id": 3 } ]

const getAverage = (reviews) => {

   return Math.round(reviews.reduce((acc, curr) => (acc + curr.stars), 0) / reviews.length));

};

    <div>

      <p className="totalReviewsTally">Average: { getAverage(reviews) } {reviews.length}</p>

    </div>