Question

        export default class GameControls 
        extends React.Componentconstructor(props) {
         super(props);
         this.state = {
          x: 0,
          y: 0
         };

绑定按钮功能

        this.left = this.left.bind(this);
        this.right = this.right.bind(this);
        this.up = this.up.bind(this);
        this.down = this.down.bind(this);
       }

按钮功能

         left = event => {
         this.setState({ x: -1, y: 0 });
         alert(this.state.value);
         };
         right = event => {
         this.setState({ x: 1, y: 0 });
    alert(this.state.value);
  };
  up = event => {
    this.setState({ x: 0, y: 1 });
    alert(this.state.value);
  };
  down = event => {
    this.setState({ x: 0, y: -1 });
    alert(this.state.value);
  };

呈现按钮

  render() {
    return (
      <div>
        <h2 className="Sub-heading">Controls:</h2>
        <button className="left">
          {
            <img
              src={leftArrow}
              className="img-fluid"
              alt="left"
              onClick={this.left}
            />
          }
        </button>

        <button className="up">
          {
            <img
              src={upArrow}
              className="img-fluid"
              alt="up"
              onClick={this.up}
            />
          }
        </button>

        <button className="down">
          {
            <img
              src={downArrow}
              className="img-fluid"
              alt="Down"
              onClick={this.down}
            />
          }
        </button>

        <button className="right">
          {
            <img
              src={rightArrow}
              className="img-fluid"
              alt="right"
              onClick={this.right}
            />
          }
        </button>
      </div>
    );
  }
}

我正在尝试更改状态，以便可以将它们发送到Firebase并在网格上传达玩家的动作，但是我一直无法得到定义，也不知道如何解决。

我尝试了几种更改状态的方法，但仍然没有运气。

Answer 1

setState是异步的。因此，您无法在进行更改后立即引用状态。它接受回调作为参数，该回调将在完成时执行。

您想要类似的东西

this.setState({ x: 0, y: -1 }, () => {
   alert(this.state.x)
});

除了React.js中未定义的状态外，我无法获得其他状态的返回值

1 个答案: