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

【问题标题】：× Error: Too many re-renders. React limits the number of renders to prevent an infinite loop× 错误：重新渲染过多。 React 限制渲染次数以防止无限循环
【发布时间】：2020-05-28 19:59:44
【问题描述】：

This is a picture of the error我认为这个错误是因为我在函数内部调用了 setState，但我不确定也不知道如何修复它。

这是尝试为扫雷游戏制作棋盘的众多尝试之一，但我遇到了困难，每次我尝试任何东西来制作使棋盘成为的二维数组时都会遇到此错误只有一个数组，所以我把它分成了单元格。

This is the index.js file

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

【问题讨论】：

你遇到了什么错误？
@OlexandrPoplavskyi 重新渲染太多
当我尝试运行代码时它不会崩溃。您使用的是什么版本的 React，请提供错误截图。
@Puk 我在 16.13.1 版本，我把图片放在描述中
问题实际上可能出在您的 src/index.js 中，因为渲染问题从那里开始。发布问题时，您可以提供的上下文越多越好。如果您可以将代码的 sn-p 粘贴到 index.js（显示错误的地方）和 App.js 中，那就太好了

标签： javascript reactjs

【解决方案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());
}, []);

【讨论】：