javascript - React "Rock Paper Scissors"游戏无法运行

Question

我正在制作一个剪刀石头布游戏。我已经测试了某些部分，它们似乎可以单独工作，但不能一起工作。

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

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，但什么也没有显示。

Answer 1

您的代码存在一些问题:

1. 您要生成一个 0 到 100 之间的随机数，而您的 rockPaperScissors 数组只有 3 个元素(您应该使用数组的长度)。
2. 您要生成一个可能是小数的随机数，但数组索引应该是整数(您应该使用 Math.floor)。
3. 您将 rockPaperScissors 存储在您的状态中，尽管它永远不会改变(仅使用状态来存储随时间变化并影响 View 的数据)。
4. 为此使用类组件是一种过度杀伤力(您可以将其转换为带有钩子(Hook)的功能组件并大大减少代码)。

要生成 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>
  );
};