反应“石头剪刀布”游戏不工作答案

【问题标题】：React "Rock Paper Scissors" Game Not Working反应“石头剪刀布”游戏不工作
【发布时间】：2019-08-14 04:04:49
【问题描述】：

我正在制作 Rock Paper Scissors 游戏。我已经测试了某些部分，它们似乎是分开工作的，但不是一起工作的。

我不知道该尝试什么，但我尝试了不同的方法来生成数字。

constructor() {
    super();
    this.state = {
        rockPaperScissorsComputer: ['rock','paper','scissors'],
        random: null
    };
    this.handleClick = this.handleClick.bind(this);
}

handleClick() {
    const min = 1;
    const max = 100;
    const random = min + (Math.random() * (max - min));
    this.setState({ random })
}

render() {
    return (
        <div>
            <button value="Click me!" onClick={this.handleClick}>Click me</button>
            <h1> {this.state.rockPaperScissorsComputer[this.state.random]} </h1>
        </div>
    );
}

每次单击按钮时它都应该显示rock/paper/scissors，但没有显示任何内容。

【问题讨论】：

您正在生成一个介于 0 和 100 之间的随机数，而您的 rockPaperScissors 数组只有 3 个元素。您应该生成一个介于 0 - 2 之间的随机数，如下所示：Math.floor(Math.random() * 3)
是的，有效。我应该看到的。谢谢！
我已经提交了一个答案，其中包含一些改进您的代码的其他建议

标签： javascript reactjs random

【解决方案1】：

您的代码存在一些问题：

您正在生成一个介于 0 和 100 之间的随机数，而您的 rockPaperScissors 数组只有 3 个元素（您应该使用数组的 length）。
您正在生成一个可能是小数的随机数，但数组索引应该是整数（您应该使用Math.floor）。
您将rockPaperScissors 存储在您的状态中，尽管它永远不会改变（仅使用状态来存储随时间变化并影响视图的数据）。
为此使用类组件是大材小用（您可以将其转换为带有钩子的功能组件并大大减少您的代码）。

要在min 和max 之间生成一个随机整数，您可以这样做：

const index = Math.floor(Math.random() * (max - min)) + min;

所以你的最终代码应该是这样的：

const RockPaperScissors = () => {
  const [pick, setPick] = useState(null);

  const handleOnClick = useCallback(() => {
    const pool = ['rock','paper','scissors'];
    setPick(pool[Math.floor(Math.random() * pool.length)]);
  }, [setPick]);

  return (
    <div>
      <button value="Click me!" onClick={handleOnClick}>Click me</button>
      <h1>{pick}</h1>
    </div>
  );
};

【讨论】：