Question

我正在开发John Conway的《生活游戏》应用程序，但我仍在学习React。

Here is what I have so far。游戏板是在App.js状态下使用2D阵列创建的。我在构造函数中使用了新的Array和.fill方法，最初创建了板的正方形。稍后在App.js中，我有一个名为isSquareAlive的函数，该函数可以处理onClick功能，并在用户单击它们时将适当的正方形更改为其他颜色（在生活游戏中它们是“活着的”）。

我现在要做的是，当用户首次加载应用程序时生成一个随机面板，其中一些方块将处于活动状态，而另一些方块则不会。我创建了一个名为getRandomNumber的随机数函数，该函数创建了1或0。现在我想创建另一个函数，该函数将在componentDidMount上调用，并且该函数将在用户加载应用程序及其将调用getRandomNumber，并用1填充2d数组的某些元素（正方形），用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中的返回1只是我是一个菜鸟，试图让它返回某些东西。

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

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

如何将随机数推入2D数组？

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

React-更新2D数组的状态，并使用.map函数和new Array.fill将其填充为随机数

1 个答案: