下記のようなコンポーネントで 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>
)
}