NdYAG/react-rater

React-rater can't work normally with `Too many request` (HTTP status code 429).

AChaoZJU opened this issue · 2 comments

In the following code, http request is sent in onRate.
Props rating is rendered with redux's mapStateToProps.

gradeQuestion = (question, e) => {
    if (e.rating && e.rating !== question.grade) {
      this.props.gradeQuestion(question.id, e.rating)  // This is an action which sends http request
    }
  }
 <Rater total={5} rating={question.grade} onRate={e => this.gradeQuestion(question, e)} />

It works well except the Too many request (HTTP status code 429).

screenshot from 2018-05-19 19-51-30

image

NdYAG commented

Hi @AChaoZJU ,

To make API for developers simple,
now onRate will be called before rating, during rating and after rating.
https://github.com/NdYAG/react-rater#callback

There are case why this exist, sometimes you may want to display a rating value near star rater, and text changes while user rates.

To make sure that onRate will be called only one time, currently you could instead use this workaround in your code:

    if (e.type === 'click' && e.rating && e.rating !== question.grade) {

Yet this is a known problem. To call onRate callback during rating (mouse moving between star) is not ideal in your case. I'll implement a new version to distinguish these three events later.

But if you have any suggestion for this, please leave a note, thanks.

@NdYAG thank you for answer. It works well. Look forward to your new version.