javascript - 将数组元素分配给状态值

Question

我正在尝试构建一个由可点击方 block 组成的 3x3 网格的寻宝游戏。单击时，显示的值可以是“树”或“宝”。只有一个“宝”。

我(在这一点上)苦苦挣扎的部分是分配我的方 block ，这是数组的一个随机元素。我已经成功地将我原来的 9 项数组更改为随机数组 "tree" s和一个"treasure" .但是，如何将每次调用随机播放函数时随机播放的那些数组元素分配到我的网格中的随机方 block ？

我试图 map通过 trees 的数组和我的单例 treasure但未能找到一种方法来随机将这些值分配给随机方 block ，因为我希望游戏在大多数情况下都将宝藏放在不同的位置。

我已经在下面粘贴了我的完整代码以供引用。

Board.js

import React, { Component } from 'react';
import Square from './Square'


class Board extends Component {
    constructor(props){
        super(props)
        this.state = {
            spaces: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            boxOne: "?",
            boxTwo: "?",
            boxThree: "?",
            boxFour: "?",
            boxFive: "?",
            boxSix: "?",
            boxSeven: "?",
            boxEight: "?",
            boxNine: "?"
        }
    }
shuffle = (arr) => {
    for(let i = arr.length - 1; i > 0; i--) {
      const randomNum = Math.floor(Math.random() * (i + 1))
      [arr[i], arr[randomNum] = arr[randomNum], arr[i]]
    }
    let newArr = []
    arr.map(x => {
      if (x === 7) {
        newArr.push("Treasure")
      } else {
        newArr.push("Tree")
      }
    })
    this.setState({spaces: newArr})
}

  render() {
    return (
        <div className = "container">
            <div className = "board">
                <Square clickEvent={this.shuffle} boxOne={this.state.boxOne}
                boxTwo={this.state.boxTwo}
                boxThree={this.state.boxThree}
                boxFour={this.state.boxFour}
                boxFive={this.state.boxFive}
                boxSix={this.state.boxSix}
                boxSeven={this.state.boxSeven}
                boxEight={this.state.boxEight}
                boxNine={this.state.boxNine}
                newSpaces={this.state.spaces}
                />
            </div>
        </div>
    );
  }
}

export default Board;

Square.js

import React, { Component } from 'react';

class Square extends Component {
    render() {
        return(
            <div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxOne}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxTwo}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxThree}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxFour}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxFive}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxSix}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxSeven}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxEight}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxNine}</div>
            </div>
        )
    }
}

export default Square

Answer 1

如果我对你的理解是正确的，那么我会用简单的方法...

1. 将“树”分配给所有方 block 。
2. 将“宝藏”分配给索引 Math.floor(Math.random() * 9)。

这个方法很简单，也很高效:)

您无需担心将方 block 洗牌，因为您只是随机选择其中一个作为宝藏。