我正在嘗試更改我的 Conway game of life 應用程式上的網格大小，但是當我單擊按鈕設定新的 numCols/numRows 時，應用程式中只有其中一個受到影響。我如何有效地設定新狀態以便網格按預期更改大小。
我在應用程式中有 2 個按鈕，一個使網格變小，一個使網格變大。onClick 它們觸發函式 sizeHandler & sizeHandler2。
我的猜測是我需要以不同的方法設定新狀態，但我嘗試了幾種方法無濟于事。
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;
uj5u.com熱心網友回復：
你正在做的是你想要改變numRows并numCols產生副作用。你實際上幾乎是自己說的。React 有一個鉤子useEffect：
useEffect(() => {
setGrid(generateEmptyGrid())
}, [numRows, numCols]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/403143.html
標籤：
上一篇：無法從json檔案中獲取資料
下一篇：創建鏈表時使用“new”