更改 state 時，React 中的網格大小未正確更改

Question

我正在嘗試更改我的康威生活游戲應用程序的網格大小，但是當我單擊按鈕設置新的 numCols/numRows 時，只有其中一個會在應用程序上受到影響。 如何有效地設置新的 state 以便網格按預期更改大小。

我在應用程序中有 2 個按鈕，一個用於縮小網格，一個用於放大網格。 onClick 它們觸發 function sizeHandler & sizeHandler2。

我的猜測是我需要用不同的方法設置新的 state 但我嘗試了一些方法無濟於事。

import React, { useState } from 'react'
import './App.css';

function App() {

  const color = "#111"

  const [numRows, setNumRows] = useState(20)
  const [numCols, setNumCols] = useState(20)
 
  const generateEmptyGrid = () => {
    const rows = [];
    for (let i = 0; i < numRows; i++) {
      rows.push(Array.from(Array(numCols), () => 0))
    }
    return rows
  }

  const [grid, setGrid] = useState(() => {
    return generateEmptyGrid();
  })

  const sizeHandler = () => {
    setNumRows(40)
    setNumCols(40)
  }

  const sizeHandler2 = () => {
    setNumRows(20)
    setNumCols(20)
  }

  // RENDER
  return (
    <div className="page">
      <div className="title">
        <h1>
          Conway's Game Of Life
        </h1>

        <button onClick={sizeHandler}>
          Size+
        </button>

        <button onClick={sizeHandler2}>
          Size-
        </button>

      </div>

      <div className="grid" style={{
          display: 'grid',
          gridTemplateColumns: `repeat(${numCols}, 20px)`
        }}>
        {grid.map((rows, i) => 
          rows.map((col, j) => 
            <div className="node"
            key={`${i}-${j}`}
            style={{
              width: 20,
              height: 20,
              border: 'solid 1px grey',
              backgroundColor: grid[i][j] ? color : undefined
            }} 
            />
          ))}
      </div>
    </div>
  );
}

export default App;

Answer 1

您正在做的是您希望更改numRows和numCols以產生副作用。 你實際上幾乎是自己說的。 React 有一個鈎子： useEffect ：

useEffect(() => {
  setGrid(generateEmptyGrid())
}, [numRows, numCols]);