时间戳

首页 > 解决方案 > 除了 React.js 中的 undefined 之外，我无法让状态返回

reactjs - 除了 React.js 中的 undefined 之外，我无法让状态返回

问题描述

        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 并在网格上传达玩家的运动，但是我一直返回未定义并且不知道如何修复它。

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

标签： reactjs

解决方案

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

你想要这样的东西：

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

推荐阅读