Реагируйте JS - onClick создает объект внутри объекта в setState

Question

Я делаю приложение React для турнира по пинг-понгу.Код ниже.

import React, { Fragment, Component } from "react";
import Button from "./Button";

const playerStylingTrue = {
    backgroundColor: "#26C281"
   };

class Matches extends Component {
     constructor(props) {
     super(props);
     this.state = {
          numOfRounds: "",
          numberOfPlayers: this.props.numberOfPlayers,
          player1Clicked: false,
          player2Clicked: false,
          winners: []
          }

this.onClickWinnerP1 = this.onClickWinnerP1.bind(this);
this.onClickWinnerP2 = this.onClickWinnerP2.bind(this);
}

numberOfRounds() {
  const { numberOfPlayers } = this.state;
  const numOfRounds = Math.ceil((Math.log(numberOfPlayers)) / 
   (Math.log(2)));
  this.setState = ({
      numOfRounds: numOfRounds
      })
 };

onClickWinnerP1(player1) {
let player1String = player1.toString()
let { winners } = this.state;
// let findWinner = winners.find(o => o.player1String === player1);
//winners.includes(findWinner) ? null : 

  this.setState({
    player1Clicked: !this.state.player1Clicked,
    player2Clicked: this.state.player1Clicked,
    winners: [{...winners, player1String, winner:true}]
  })
};

onClickWinnerP2(player2) {
  let player2String = player2.toString()
  let { winners } = this.state;
  this.setState({
    player2Clicked: !this.state.player2Clicked,
    player1Clicked: this.state.player2Clicked,
    winners: winners.includes(player2String) ? [...winners] : 
[{...winners, player2String, winner:true}]
  })

};

 render() {
  const { pairs } = this.props;
  const { winners } = this.state;
  console.log(winners)
  return (
    <Fragment>
      <Button
        onClick={this.props.onClick}
        className={"btn btn-success"}
        buttonText={"Create Random Matches ?"}
      />
      {pairs.map((pair, i) => {
          let player1 = [...pair];
          let player2 = player1.splice(0, Math.ceil(player1.length / 
        2));
        return (
          <div key={i} className="fixture-div">
            <ul className="list-unstyled fixture-list">
              <li
                style={ this.state.winners.includes(player1) ? playerStylingTrue : null}
                onClick={() => this.onClickWinnerP1(player1)}
                className="hvr-grow fixture">
                {player1}
              </li>
              <span>vs</span>
              <li
                style={this.state.winners.includes(player2) ? playerStylingTrue : null}
                onClick={() => this.onClickWinnerP2(player2)}
                className="hvr-grow fixture">
              {player2}
            </li>
          </ul>
        </div>
      )
    })
    }
    {/* <TwoRounds pairs={pairs}/> */}
  </Fragment>
   );
  }
 }

 export default Matches;

В настоящее время onClickWinnerP1 успешно добавляет объект в состояние, содержащее правильные данные.Однако, если я дважды щелкну или использую onClickWinnerP2, это также добавляет объект в состояние, но вложенный в объект, который уже существует.И так далее, и так далее.Просто продолжаю вкладывать.

Любая помощь будет принята с благодарностью!

Answer 1

То, как вы делаете setState в функции noOfRounds, неверно.Вместо этого вы должны сделать, как показано ниже

  this.setState({
     numOfRounds: numOfRounds
  })

Что касается вашей проблемы, выполните что-то вроде ниже в функции onClickWinnerP1, чтобы поместить объекты в массив

this.setState(prevState => ({
   player1Clicked: !this.state.player1Clicked,
   player2Clicked: this.state.player1Clicked,
   winners: [...prevState.winners, {player1String, winner:true}]
}))

И в функции onClickWinnerP2 сделайте что-то подобное нижепомещать объекты в массив

this.setState(prevState => ({
    player2Clicked: !this.state.player2Clicked,
    player1Clicked: this.state.player2Clicked,
    winners: prevState.winners.includes(player2String) ? [...prevState.winners] : 
[...prevState.winners, {player2String, winner:true}]
  }))