React - 使用 .map 函数和新的 Array.fill 更新二维数组的状态并用随机数填充

Question

我正在开发 John Conway 的 Game of Life 应用程序，并且仍在学习 React。

Here is what I have so far。游戏板是在我的App.js 状态下使用二维数组创建的。我在构造函数中使用 new Array 和 .fill 方法来最初创建棋盘的方格。稍后在App.js 中，我有一个名为 isSquareAlive 的函数，它处理 onClick 功能并在用户单击它们时将相应的方块更改为不同的颜色（它们在生命游戏的意义上是“活的”）。

我现在要做的是在用户第一次加载应用程序时生成一个随机板，其中一些方块会处于活动状态，而另一些则不会。我创建了一个名为 getRandomNumber 的随机数函数，它创建一个 1 或 0。现在我想创建另一个将在 componentDidMount 上调用的函数，该函数将在用户加载应用程序时创建一个初始游戏板，它会调用getRandomNumber 并用 1 填充一些二维数组的元素（正方形），用 0 填充其他元素。带 1 的方块会“活着”，带 0 的方块不会。

换句话说，我希望每次用户加载页面时随机生成一个游戏板。我该怎么做？嵌套 .map 函数，然后将 getRandomNumber 的结果推送到新的 Array.fill 中？

这是我的App.js：

import React, { Component } from 'react';
import './App.css';
import GameBoard from './GameBoard.js';
import Controls from './Controls.js';
import update from 'immutability-helper';
import Info from './Info.js';

class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      boardHeight: 50,
      boardWidth: 30,
      iterations: 10,
      reset: false,
      alive: false,
      board: [],
      randomNum: ''
    };

    this.state.board = new Array(this.state.boardHeight).fill(new Array(this.state.boardWidth).fill(0));
  }

  // Allows user to click button and change size of game board
  selectBoardSize = (width, height) => {
    this.setState({
      boardHeight: height,
      boardWidth: width,
      board: new Array(this.state.boardHeight).fill(new Array(this.state.boardWidth).fill(0))
    });
  }

  // Resets game board back to blank when user clicks reset button
  onReset = () => {
    this.setState({ board: new Array(this.state.boardHeight).fill(new Array(this.state.boardWidth).fill(0)) })
  }

  // Generates random number
  getRandomNumber = (max) => {
    return Math.floor(Math.random() * Math.floor(max));
  }

  /* This is the function I am trying to build and generate a random starting game board with
  componentDidMount = () => {
    // Stores random number 1 or 2
    const number = this.getRandomNumber(2);
    const data = this.state.board;

    // This is what I need help on
    const startingBoard = data.map((row, y) => {
                            row.map((ea, x) => {
                              return 1;
                            })
    })

    // After startingBoard is working I can set state with startingBoard
    this.setState({
      board: startingBoard
    });
  }
*/


  // Called when user clicks on specific square. Changes color of square depending on if it's alive or not
  isSquareAlive = (x, y) => {
    const data = this.state.board;
    const ySquare = y;
    const xSquare = x;

    const newData = data.map((row, y) => {
      return y === ySquare ? (
        row.map((cell, x) => x === xSquare ? (cell + 1) % 2 : cell)
      ) : (
        row
      )
    })

    this.setState({ board: newData });

  }



  render() {
    /*console.log('Random number is : ' + this.state.randomNum);*/
    return (
      <div>
      <div className="game-container">

      <GameBoard
        height={this.state.boardHeight}
        width={this.state.boardWidth}
        reset={this.onReset}
        board={this.state.board}
        alive={this.isSquareAlive}
        isAlive={this.state.alive}
      />

      <Controls
        selectBoardSize={this.selectBoardSize}
        iterations={this.state.iterations}
        onReset={this.onReset}
      />

      </div>

      <div className="info-container">
        <Info />
      </div>
      </div>
    );
  }
}

export default App;

startingBoard 中的 return 1 只是我作为菜鸟并试图让它返回一些东西。

重申一下：董事会是这样创建的：

this.state.board = new Array(this.state.boardHeight).fill(new Array(this.state.boardWidth).fill(0));

如何将随机数推入二维数组？

Answer 1

这是一个简化的应用程序。我认为在构造函数中设置 state.board 的初始值可能会起作用。这应该会在用户每次启动应用程序时有效地创建一个新面板。

import React, {Component} from 'react';

const createRandomBoard = (height, width) => {

  const randomCellValue = () => (Math.random() < 0.5 ? 1 : 0);

  // thank you @simonbor on StackOverflow:
  // https://stackoverflow.com/questions/5836833/create-a-array-with-random-values-in-javascript
  const createRow = () => Array.from({length: width}, randomCellValue);

  return Array.from({length: height}, createRow);
};


class App extends Component {
  constructor(props){
    super(props);
    const boardHeight = 50;
    const boardWidth = 30;

    this.state = {
      boardHeight,
      boardWidth,
      board: createRandomBoard(boardHeight, boardWidth),
    };
  }

  render() {

    return (
      <div>

      </div>
    );
  }
}

export default App;

把这个放在 stackblitz 上：https://stackblitz.com/edit/so-gol-answer?file=App.js