89151


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

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

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

[code]

    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>
      )
    }
    
[/code]


CC BY-SA 4.0
2022-05-30T00:09:18.333
89127
2022-05-30T21:07:04.143
2022-05-30T02:01:59.113
30065
30065
question
reactjs
ReactHooks 二次元配列のstateの更新による再レンダリングが行われない


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

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


CC BY-SA 4.0
2022-05-30T21:07:04.143
89151
2022-05-30T21:07:04.143
32959
89127
answer