javascript - 反应组件不使用二维数组重新渲染设置状态

Question

我正在尝试在 react 上构建康威的生命游戏，但每次重置我用来表示世界的二维数组的状态时，我都无法让组件重新渲染。

当我调用使用开始按钮更改状态的函数时，它会重新呈现。但是，该函数使用 setTimeout 调用自身，尽管它继续运行，因为我已经使用 console.log 检查了它，但它不会重新呈现组件，直到我停止并重新启动循环（我使用相同的按钮来停止并开始）。

这是我用于循环世代的函数：

const passTime = () => {

if (!runningRef.current) return

const newWorld = cloneWorld(world)

for (let i = 0; i < numRows; i++) {

  for (let j = 0; j < numCols; j++) {

    let neighbours = 0
    neighbourhood.forEach(([x, y]) => {
      const newI = i + x
      const newJ = j + y
      if (newI >= 0 && newI < numRows && newJ >= 0 && newJ < numCols) {
        neighbours += world[newI][newJ]
      }
    })

    if (neighbours < 2 || neighbours > 3) newWorld[i][j] = 0

    if (world[i][j] === 0 && neighbours === 3) newWorld[i][j] = 1
  }
}
setWorld(newWorld)
setState(!state)

console.log(runningRef.current)
setTimeout(passTime, 100)
}

这些是我用于创建和克隆网格的函数：

export const generateWorld = (rows: number, columns: number): World => {
const grid: World = []

  for (let i = 0; i < rows; i++) {
    grid.push(Array.from(Array(columns), () => 0))
  }
  return grid
}

export const cloneWorld = (world: World): World => {
  const clonedWorld: World = []

  for (let i = 0; i < world.length; i++) {
    clonedWorld[i] = [...world[i]]
  }
  return clonedWorld
}

标签： javascriptreactjstypescript