更改状态时，React 中的网格大小未正确更改

Question

我正试图更改我的康威人生游戏应用程序上的网格大小，但当我单击按钮设置新的numCols/numRows时，应用程序上只有其中一个受到影响。我如何有效地设置新状态，使网格按预期更改大小。

我在应用程序中有两个按钮，一个用来缩小网格，另一个用来放大网格。onClickthey触发函数sizeHandler&sizeHandler.

我的猜测是，我需要用不同的方法设置新状态，但我尝试了几种方法，但都无济于事。

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]);