如何解决使用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 举报,一经查实,本站将立刻删除。