Question

import React, { Component } from "react";
import "./Game.css";

class Game extends Component {
  static defaultProps = {
    list: ["rock", "paper", "scissors"]
  };
  constructor(props) {
    super(props);
    this.state = {
      play: false,
      random: null,
      user: null,
      winner: false
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }
  handleSubmit(event) {
    event.preventDefault();
    this.setState({
      play: !this.state.play
    });
  }
  handleClick(event) {
    //paper beats Rock
    //scissors beats Paper
    // rock beats scissors
    // 1 > 0
    // 2 > 1
    //0 > 2
    if (this.state.winner) {
      return;
    }
    let hasWon;
    let inputIndex = this.props.list.indexOf(event.target.value);
    let ranIndex = this.props.list.indexOf(this.state.random);
    if (
      (inputIndex === 1 && ranIndex === 0) ||
      (ranIndex === 1 && inputIndex === 0)
    ) {
      hasWon = true;
      //  return this.props.list[1];
    } else if (
      (inputIndex === 2 && ranIndex === 1) ||
      (ranIndex === 2 && inputIndex === 1)
    ) {
      hasWon = true;
    } else if (
      (inputIndex === 0 && ranIndex === 2) ||
      (ranIndex === 0 && inputIndex === 2)
    ) {
      hasWon = true;
    }

    console.log(this.props.list.indexOf(this.state.random));
    this.setState({
      user: event.target.value,
      random: this.props.list[
        Math.floor(Math.random() * this.props.list.length)
      ],
      winner: hasWon
    });
  }
  render() {
    let game;

    if (this.state.play) {
      game = (
        <div className="Game-userButtons">
          <button
            onClick={this.handleClick}
            name={this.state.user}
            value="rock"
          >
            Rock
          </button>
          <button
            onClick={this.handleClick}
            name={this.state.user}
            value="paper"
          >
            Paper
          </button>
          <button
            onClick={this.handleClick}
            name={this.state.user}
            value="scissors"
          >
            Scissor
          </button>
          <button>Play Again! </button>
        </div>
      );
    } else {
      game = (
        <div>
          <form onSubmit={this.handleSubmit}>
            <button>Play </button>
          </form>
        </div>
      );
    }
    return (
      <div>
        <h1>Rock, paper, scissors </h1>
        <div className="players">
          <div className="user">
            <i className={`fas fa-hand-${this.state.user}`}></i>
          </div>
          <div className="robot">
            <i className={`fas fa-hand-${this.state.random}`}></i>
          </div>
        </div>
        {game}
      </div>
    );
  }
}

export default Game;

我试图通过比较用户和随机生成的指标来确定石头，剪刀纸游戏的赢家。在handleClick（）中，我写了赢得比赛的潜在条件以及转化为潜在胜利的指数。当我console.log this.state.random的索引时，呈现的状态似乎比被控制台的状态落后一步。因此，条件是可行的，但视觉效果没有任何意义。我怎样才能解决这个问题？谢谢您的时间！

Answer 1

我认为我找到了您的问题，它与 this.state.random 有关。如果您在此部分检查代码：

 let ranIndex = this.props.list.indexOf(this.state.random);

您正在将 randIndex 与状态中的前一个随机值进行比较，我认为与其获取状态值，不如创建一个新的随机值：

let randIndex =  this.props.list[
        Math.floor(Math.random() * this.props.list.length)
      ];

并在设置状态下完成比较后更新它：

this.setState({
      user: event.target.value,
      random: randIndex,
      winner: hasWon
    });

为什么我的父组件中的状态落后了一步？

1 个答案: