React 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

您在 noOfRounds 函数中执行 setState 的方式不正确。相反，你应该像下面那样做

  this.setState({
     numOfRounds: numOfRounds
  })

关于您的问题，请在 onClickWinnerP1 函数中执行以下操作以将对象推送到数组中

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

AND 在 onClickWinnerP2 函数中执行如下操作将对象推送到数组中

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