使用react-rater，如何将评分值发送到数据库，并计算平均评分

问题描述

我正在尝试使用 react-rater 添加星级评分系统（React 新手，第一次添加星级评分系统）。将评级值设置为 state 后，点击 console.log(rating) 时会显示正确的值。但是，在阅读文档 https://www.npmjs.com/package/react-rater 后，我仍然无法弄清楚如何将评分值传递给 mongodb，计算平均评分，然后在不同的组件中显示平均评分值。 （交互式星星在反应引导模式中评级，需要它在不同组件的模式之外显示平均星级（非交互式星星））。如果你以前用过这个，你能举个例子吗？代码标有 <--------comments 以供遵循。

//COMPONENT WHERE THE INTERACTIVE STARS CAN BE RATED

import React,{ Fragment } from 'react';
import Axios from 'axios';
import Rater from 'react-rater';
import './comment-styles.scss';

export class CommentBox extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            username: [],reviews: [],rating: []  <-----------star rating state
        }
        this.addReview = this.addReview.bind(this);
        this.handleRate = this.handleRate.bind(this); 
    };

    //REVIEWS
    addReview() {
        Axios({
            method: 'POST',url: 'http://localhost:8080/breakfast-tacos/reviews',headers: {
                'Content-Type': 'application/json'
            }
        }).then(response => {
            this.setState({ username: [response.data.id],reviews: [response.data.id] })
           // window.location.reload(); //ADDED       
        }).catch(error => console.log(error))
    }

    
    componentDidMount() {

        Axios.get('http://localhost:8080/breakfast')
        .then(reviews => {
            console.log(reviews.data.reviews)
            this.setState({ reviews: reviews.data.reviews })
        })
        .catch(err => console.log(err))

        Axios.get('http://localhost:8080/breakfast')
        .then(username => {
            console.log(username.data.username)
            this.setState({ username: username.data.username })
        })
        .catch(err => console.log(err))
    };


    componentDidUpdate() {

        Axios.get('http://localhost:8080/breakfast')
        .then(reviews => {
            /*console.log(reviews.data.reviews)*/
            this.setState({ reviews: reviews.data.reviews })
        })
        .catch(err => console.log(err))

        Axios.get('http://localhost:8080/breakfast')
        .then(username => {
            /*console.log(username.data.username)*/
            this.setState({ username: username.data.username })
        })
        .catch(err => console.log(err))

    };


    //STAR RATING
    handleRate( { rating }) {      <-------Handle the star rating - setState/post request
        console.log(rating)        <-------Displays the correct rating value when clicked
        this.setState({ rating: rating })   <-----sets the rating value in state

        Axios({
            method: 'POST',headers: {
                'Content-Type': 'application/json'
            }
        }).then(response => {
            this.setState({ rating: response.data.id })   <------Post rating to mongoDB (Not working though)
        }).catch(error => console.log(error))
    }    
   

    render() {
        return (
            <div id="commentWrapper">
                <div className="commentHeader">
                    <h5>Leave a Rating!</h5>

                    <form action="/breakfast-tacos" method="POST">
                    
                        <Rater style={{fontSize: '35px'}} interactive={true} total={5} onRate={this.handleRate} rating={this.state.rating} />
                        <button name="rating" id="submitRatingBtn" type="submit" onClick={this.handleRate}>Submit</button>

                        <textarea className="reviewTextBox" maxLength="250" placeholder="Write a review..." name="reviews"></textarea>
                        <input type="text" placeholder="Your name" name="username" />
                        <button id="submitReviewBtn" type="submit" onClick={this.addReview}>Submit</button>
                    </form>

                </div>
                <hr />
                <Fragment>
                <div className="reviews">
                        {this.state.reviews.map((val,key) => {
                            return  <span className="text">
                                        <h6 key={key.id}>{val.username}:</h6>
                                        <p key={key.id}>{val.reviews}</p>
                                    </span>
                        })}
                </div>
                    </Fragment>
                <hr />
            </div>
        )
    }
};

/DIV FROM SEPARATE COMPONENT WHERE AVERAGE SHOULD BE DISPLAYED IN THE NON-INTERACTIVE STARS
                
<div id="ratingsBox">
        <Rater style={{fontSize: '35px'}} total={5} interactive={false} rating={}  />  <-----rating={}
</div>

来自 Get 请求的计算平均值应传递给 rating={}。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）