1

下記のようなコンポーネントで board という二次元配列のstateを持っており、
それをArray.mapを二回使って描画しています。

クリック時にその座標の値を変更したく、handleClick でstateの更新をしていますが再描画されません。
setBoard 前後の console.log では newBoard,board 共にちゃんと更新されているのですが、再描画されていないのは何故でしょうか。
また、どのように修正すべきでしょうか。

ご回答のほど、よろしくお願いします。

import React, { useState } from 'react'

export const Test: React.FC = () => {
  const [board, setBoard] = useState<number[][]>([
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0]
  ])

  const handleClick = (row: number, col: number) => {
    if (board[row][col] === 0) {
      const newBoard = board
      newBoard[row][col] = 1
      console.log(newBoard)
      setBoard(newBoard)
      console.log(board)
    }
  }

  const items = board.map((row, rowIdx) =>
    row.map((col, colIdx) => {
      const key = `pos${rowIdx}${colIdx}`
      return (
        <div key={key} onClick={() => handleClick(rowIdx, colIdx)}>
          {col}
        </div>
      )
    }),
  )

  return (
    <div>
      {items}
    </div>
  )
}

1 件の回答 1

2

handleClick 内の const newBoard = boardconst newBoard = [...board] に変えてください。

"board" と "setState に渡された newBoard" は同じオブジェクトなので、再描画が回避されます。[...board] は新しいオブジェクトを作成します。これによって newBoardboard とは別のオブジェクトになり、再描画されます。
https://ja.reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update

1
  • 変数名を変えただけだと再描画されないんですね...! 分かりやすく解説して下さりありがとうございました。
    – Aroma
    2022年5月31日 0:56

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。