[테이블에서 클릭마다 "O" "X" 각각 숫자 올라가기 해주기]조건에 따라 처리하기 if문 , 조건문 연산자 '?'

https://ko.javascript.info/ifelse

if와 '?'를 사용한 조건 처리

 

조건문 연산자 '?'로 시도해보았다.

        APlayer: this.state.xIsNext? this.state.APlayer +1 : this.state.APlayer +0,
        Bplayer: this.state.xIsNext? this.state.BPlayer +0 : this.state.BPlayer +1,

 handleClick(i) {

      const history = this.state.history.slice(0, this.state.stepNumber + 1);

      const current = history[history.length - 1];

      const squares = current.squares.slice();

     

      if (calculateWinner(squares, this.state.boardSize) || squares[i]) {

        return;

      }

      squares[i] = this.state.xIsNext ? "X" : "O";

      console.log(this.state.xIsNext)

      this.setState({

        history: history.concat([

          {

            squares: squares

          }

        ]),

        stepNumber: history.length,

        APlayer: this.state.xIsNext? this.state.APlayer +1 : this.state.APlayer +0,

        Bplayer: this.state.xIsNext? this.state.BPlayer +0 : this.state.BPlayer +1,

        xIsNext: !this.state.xIsNext

      });

    }

왜인지 모르겠지만, O의 클릭 수 결과는 출력되지 않고 있었다.

 

 

 

 

if 조건문을 사용.

 if (this.state.xIsNext) {
        this.state.APlayer +=1;
      } else {
        this.state.BPlayer +=1;}

 handleClick(i) {

      const history = this.state.history.slice(0, this.state.stepNumber + 1);

      const current = history[history.length - 1];

      const squares = current.squares.slice();

     

      if (this.state.xIsNext) {

        this.state.APlayer +=1;

      } else {

        this.state.BPlayer +=1;}

      if (calculateWinner(squares, this.state.boardSize) || squares[i]) {

        return;

      }

      squares[i] = this.state.xIsNext ? "X" : "O";

      console.log(this.state.xIsNext)

      this.setState({

        history: history.concat([

          {

            squares: squares

          }

        ]),

        stepNumber: history.length,

        xIsNext: !this.state.xIsNext

      });

    }

 

이렇게 하니,"X" "O" 모두 카운트 되었다.

 

하지만  setState()를 쓰라는 경고문을 받음