Реагировать-звезда-рейтинг-компонент

Я создаю приложение для реагирования на фильмы, в котором я пытаюсь оценить каждый фильм. Проблема, с которой я столкнулся прямо сейчас, заключается в том, что я не могу оценивать каждый фильм отдельно. Когда я оцениваю один фильм, все фильмы получают одинаковую оценку. Есть идеи, как заставить его работать? Как я могу оценить каждый товар отдельно?

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      rating: 0
    };
  }

  onStarClick(nextValue) {
    this.setState({rating: nextValue
    });
  }

  render() {
   const { rating } = this.state;

    return (                
      <div>

        <h2>Top 10 movies</h2>
        {movies.map(c => (
          <div>
            <p key={c.name}>
              {c.name}
            </p>
        <StarRatingComponent 
          name="rate1" 
          starCount={10}
          value={rating}
          onStarClick={this.onStarClick.bind(this)} 

        />
          </div>
        ))}
      </div>
    );
  }
}
1
0
626
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужен фильм для присвоения рейтинга индивидуально, а не как одно целое число. Сохраните это как массив

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      rating: new Array(movies.length).fill(0)
    };
  }

  onStarClick(index, nextValue) {
    this.setState(prevState => ({rating: [
           ...prevState.rating.slice(0, index),
           nextValue,
           ...prevState.rating.slice(index + 1)
       ]
   }));
  }

  render() {
   const { rating } = this.state;

    return (                
      <div>

        <h2>Top 10 movies</h2>
        {movies.map((c, index) => (
          <div>
            <p key={c.name}>
              {c.name}
            </p>
        <StarRatingComponent 
          name="rate1" 
          starCount={10}
          value={rating[index]}
          onStarClick={this.onStarClick.bind(this, index)} 

        />
          </div>
        ))}
      </div>
    );
  }
}

Другие вопросы по теме