Question

This is a picture of the error我认为该错误是因为我正在函数内部调用setState，但是我不确定并且我也不知道如何解决它。

这是尝试为扫雷游戏制作电路板的众多尝试之一，但是我很难受，每次我尝试做任何使二维电路板成为二维数组的尝试时，都会遇到此错误。只有一个数组，所以我将其划分为单元格。

import React, { useState } from "react";
import "./board.css";

function Board(props) {
  const [cells, setCells] = useState([]);

  const createBoard = () => {
    let board = new Array(props.rows);
    for (let i = 0; i < board.length; i++) {
      board[i] = new Array(props.columns);
    }

    for (let i = 0; i < props.rows; i++) {
      for (let j = 0; j < props.columns; j++) {
        board[i][j] = {
          isMine: false,
          isOpen: false,
          isFlag: false,
          x: i,
          y: j,
        };
      }
    }

    for (let i = 0; i < props.mines; i++) {
      let randomRow = Math.floor(Math.random() * props.rows);
      let randomColumn = Math.floor(Math.random() * props.columns);
      board[randomRow][randomColumn].isMine = true;
    }

    for (let i = 0; i < props.rows; i++) {
      for (let j = 0; j < props.columns; j++) {
        setCells(cells.concat(board[i][j]));
      }
    }

    return board;
  };

  console.table(createBoard());

  return (
    <div className="App">
      <h1>Board</h1>
    </div>
  );
}

Answer 1

尝试使用useEffect挂钩以避免重新渲染。我建议您阅读React网站上的文档。问题是您直接在render方法中更改状态，更改状态将重新渲染组件，而您一次又一次地更改它，这就是无限循环。

useEffect(() => {

  const createBoard = () => {
    let board = new Array(props.rows);
    for (let i = 0; i < board.length; i++) {
      board[i] = new Array(props.columns);
    }

    for (let i = 0; i < props.rows; i++) {
      for (let j = 0; j < props.columns; j++) {
        board[i][j] = {
          isMine: false,
          isOpen: false,
          isFlag: false,
          x: i,
          y: j,
        };
      }
    }

    for (let i = 0; i < props.mines; i++) {
      let randomRow = Math.floor(Math.random() * props.rows);
      let randomColumn = Math.floor(Math.random() * props.columns);
      board[randomRow][randomColumn].isMine = true;
    }

    for (let i = 0; i < props.rows; i++) {
      for (let j = 0; j < props.columns; j++) {
        setCells(cells.concat(board[i][j]));
      }
    }

    return board;
  };

  console.table(createBoard());
}, []);

×错误：重新渲染过多。 React限制了渲染次数以防止无限循环

1 个答案: