我无法让状态返回为除了 React 中未定义之外的任何内容.js

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>
);
}
}

我正试图改变状态，这样我就可以把它们发送到燃烧基地，并在网格上交流玩家的移动，但我一直没有定义，也不知道如何修复它。

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

Answer 1

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

你想要类似的东西：

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