直前のstateを取得したい

Question

Reactでオセロを作成しているのですが、

import React, { useState } from 'react'
import Square from '../Square'
import styles from './styles'

const { Status, BoardRow } = styles

const BLACK_PIECE = 'black'
const WHITE_PIECE = 'white'

let defaultBoard = new Array(8)
for (let i = 0; i < defaultBoard.length; i++) {
  defaultBoard[i] = new Array(8)
}

for (let x = 0; x < 8; x++) {
  for (let y = 0; y < 8; y++) {
    defaultBoard[x][y] = null
  }
}

// defaultBoard[3][3] = BLACK_PIECE
// defaultBoard[4][3] = WHITE_PIECE
// defaultBoard[3][4] = WHITE_PIECE
// defaultBoard[4][4] = BLACK_PIECE

defaultBoard[0][0] = WHITE_PIECE
defaultBoard[1][0] = BLACK_PIECE
defaultBoard[2][0] = WHITE_PIECE
defaultBoard[3][0] = WHITE_PIECE

defaultBoard[5][0] = WHITE_PIECE
defaultBoard[6][0] = WHITE_PIECE
defaultBoard[7][0] = WHITE_PIECE

// defaultBoard[4][1] = WHITE_PIECE
// defaultBoard[4][2] = WHITE_PIECE
// defaultBoard[4][3] = WHITE_PIECE
// defaultBoard[4][4] = WHITE_PIECE
// defaultBoard[4][5] = WHITE_PIECE
// defaultBoard[4][6] = BLACK_PIECE
// defaultBoard[4][7] = WHITE_PIECE

// defaultBoard[3][1] = WHITE_PIECE
// defaultBoard[2][2] = WHITE_PIECE
// defaultBoard[1][3] = BLACK_PIECE
// defaultBoard[0][4] = WHITE_PIECE

// defaultBoard[5][1] = WHITE_PIECE
// defaultBoard[6][2] = WHITE_PIECE
// defaultBoard[7][3] = WHITE_PIECE

const Board = () => {
  const [squares, setSquares] = useState(defaultBoard)
  const [currentPiece, setCurrentPiece] = useState(BLACK_PIECE)
  const status = 'Next player: ' + (currentPiece === BLACK_PIECE ? '黒の番' : '白の番');

  const boardInit = () => {
    if (!window.confirm('リセットしてもよろしいですか？')) {
      return false
    }

    for (let x = 0; x < 8; x++) {
      for (let y = 0; y < 8; y++) {
        let newSquares = squares.concat()
        newSquares[x][y] = null
        setSquares(newSquares)
      }
    }
    let newSquares = squares.concat()
    newSquares[3][3] = BLACK_PIECE
    newSquares[4][3] = WHITE_PIECE
    newSquares[3][4] = WHITE_PIECE
    newSquares[4][4] = BLACK_PIECE
    setCurrentPiece(BLACK_PIECE)
    setSquares(newSquares)
  }

  const reversePiece = (currentX, currentY, x, y) => {
    const nextPiece = currentPiece === BLACK_PIECE ? WHITE_PIECE : BLACK_PIECE
    let newSquares = squares.concat()
    let nextYIndex = currentY + y
    let nextXIndex = currentX + x

    if (newSquares[nextYIndex][nextXIndex] === nextPiece) {
      newSquares[currentY][currentX] = currentPiece

      while(true) {
        if (newSquares[nextYIndex][nextXIndex] === currentPiece) {
          setCurrentPiece(nextPiece)
          setSquares(newSquares)
          break
        }
        if (newSquares[nextYIndex][nextXIndex] === null) {
          // breakする前に元の配列に戻す
          setSquares(squares)
          break
        }
        newSquares[nextYIndex][nextXIndex] = currentPiece
        nextYIndex = nextYIndex + y
        nextXIndex = nextXIndex + x
        if (nextYIndex > 7 || nextYIndex < 0 || nextXIndex > 7 || nextXIndex < 0) {
          // breakする前に元の配列に戻す
          setSquares(squares)
          break
        }
      }
    }
  }

  const handleClick = (x, y) => {
    if (squares[y][x] === null) {
      // reversePiece(x, y, 1, 0) // 右
      reversePiece(x, y, 0, 1) // 下
      reversePiece(x, y, 0, -1) // 上
      // reversePiece(x, y, 1, 1) // 右下
      // reversePiece(x, y, 1, -1) // 右上
      // reversePiece(x, y, -1, 0) // 左
      // reversePiece(x, y, -1, 1) // 左下
      // reversePiece(x, y, -1, -1) // 左上
    }
  }

  // 縦軸y, 横軸x
  const renderSquare = (boardRow, y) => {
    return (
      boardRow[y].map((square, x) => {
        return (
          <Square
            square={ square }
            key={ x }
            addValue={ () => handleClick(x, y) }
          />
        )
      })
    )
  }

  return (
    <>
      <button
        onClick={ boardInit }
      >
        最初からやり直す
      </button>
      <Status>{ status }</Status>
      <BoardRow>
        { renderSquare(defaultBoard, 0) }
      </BoardRow>
      <BoardRow>
        { renderSquare(defaultBoard, 1) }
      </BoardRow>
      <BoardRow>
        { renderSquare(defaultBoard, 2) }
      </BoardRow>
      <BoardRow>
        { renderSquare(defaultBoard, 3) }
      </BoardRow>
      <BoardRow>
        { renderSquare(defaultBoard, 4) }
      </BoardRow>
      <BoardRow>
        { renderSquare(defaultBoard, 5) }
      </BoardRow>
      <BoardRow>
        { renderSquare(defaultBoard, 6) }
      </BoardRow>
      <BoardRow>
        { renderSquare(defaultBoard, 7) }
      </BoardRow>
    </>
  );
}

export default Board;

実際の画面はこちらです。(裏返すことができるかテストするために駒を様々な箇所に設置しています。)

上記の記述のうち、クリックした時に駒を裏返すことができるか１マスずつ判定しつつ、以下の２つの条件に当てはまる場合にはまだ裏返されていない直前のstateを反映させたいのですが、

• 自分のコマと挟み撃ちできていない
• 自分のコマがないままnullである場合

if (newSquares[nextYIndex][nextXIndex] === null) {
  // breakする前に元の配列に戻す
  console.log(squares) //これで調べても裏返ったあとのstate(下記画像のような)しか取得できない
  setSquares(squares)
  break
}
if (nextYIndex > 7 || nextYIndex < 0 || nextXIndex > 7 || nextXIndex < 0) {
  // breakする前に元の配列に戻す
  console.log(squares) //これで調べても裏返ったあとのstate(下記画像のような)しか取得できない
  setSquares(squares)
  break
}

と下側の駒まで裏返ってしまいます。
なお、一つずつ方向を記述した場合だと成功するので、裏返なかった結果になっても次のメソッドで一緒に反映されてしまうみたいです。
どのように記述すると直前のstateを取得できるのでしょうか。
よろしくお願いします。

Answer 1

concatによるコピーはshallow copyなので
二次配列の中身は元の配列への参照のままです
特にクラスオブジェクトとか入ってないならで

let newSquares = JSON.parse(JSON.stringify(squares));

でdeep copy

Comments

[退会済みユーザー]

ありがとうございます。
無事直前のstateを取得することができました。