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.js

import 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) => {&nbsp; &nbsp; let TotalStars = reviews.reduce((prev, curr) => (curr.stars + prev), 0)&nbsp; &nbsp; // TotalStars is 3.6666&nbsp;&nbsp; &nbsp; // below use any one of them averageStars&nbsp; &nbsp; // let averageStars = Math.round(TotalStars/reviews.length);&nbsp; // output 4&nbsp; &nbsp; // let averageStars = Math.floor(TotalStars/reviews.length);&nbsp; // output 3&nbsp; &nbsp; let averageStars = Math.floor((TotalStars/reviews.length)*10)/10;// output 3.6&nbsp; &nbsp; return averageStars;};<div>&nbsp; &nbsp; <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) => {&nbsp; &nbsp;return Math.round(reviews.reduce((acc, curr) => (acc + curr.stars), 0) / reviews.length));};&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <p className="totalReviewsTally">Average: { getAverage(reviews) } {reviews.length}</p>&nbsp; &nbsp; </div>