Reactjs “下一步”和“上一步”按钮工作不正常

我正在构建一个react应用程序，在按下next和back按钮时呈现不同的网络组件。我面临的问题是，这两个按钮都是对上一次按下按钮的反应。就像如果第一次按下，那么什么都不会发生。如果我按下back，则它是对上一次按下next按钮的响应

类卡扩展组件{
构造函数（）
{
超级（）；
此.state={
按钮：“”，
i:0
}
}
onClick=（事件）=>{
this.setState（{button:event.target.id}）
if（this.state.button==“1”）
{
this.setState（{i:this.state.i+1}）；
}
else if（this.state.button==“2”）
{
this.setState（{i:this.state.i-1}）；
}
console.log（this.state.i）
}
render（）{
返回(
);
}
}
导出默认卡

this.setState

需要一点时间来更新整个状态，因此您无法可靠地执行

this.setState（{button:event.target.id}）

，然后立即检查

this.state.button

-状态可能尚未完成设置

相反，我建议您根据

event.target.id

设置条件，如下所示：

if (event.target.id === "1") {
  this.setState({ i: this.state.i + 1 });
} else if (event.target.id === "2") {
  this.setState({ i: this.state.i - 1 });
}

我会一直等到

render

方法的顶部显示到

console.log

您的状态，以便进行调试，因为届时它将完成更新

---

有关如何正确使用

setState

的更多信息，您可以看到这一点，特别是标题为“状态更新可能是异步的”的部分。React中的setState是由React批处理的，基本上这意味着，如果您一个接一个地执行3个set State调用，它们都会按顺序调用

我建议阅读更多细节

现在，我们来看看您的问题：您正在根据该状态中的“先前值”设置状态：

this.setState({ i: this.state.i - 1 });

由于批处理模式，这将导致“意外”行为，因为

This.state.i

在实际调用时可能已更改

以下是React docs建议执行的操作：

setState（）并不总是立即更新组件。可能 批处理或将更新推迟到以后。这使得阅读成为一种状态 就在调用setState（）之后，这是一个潜在的陷阱。相反，使用 componentDidUpdate或设置状态回调（设置状态（更新程序、， 回拨）

setState

方法还有第二个签名，它接受带有签名的函数：

（state，props）=>stateChange

，其中

props

是可选的，如果您不想使用它，则无需传递它

您似乎经常犯的错误是在调用

this.setState

后读取

this.state

，这将不起作用

下面的代码并不完美，但希望能显示出您需要更正的内容

onClick = (event)=>{
    var buttonId = event.target.id;
    if(buttonId==="1")
    {
      this.setState((state) => {
        return { i: state.i + 1, button: 1 }
      });
    }
    else if(buttonId==="2")
    {
     this.setState((state) => {
        return { i: state.i - 1, button: 2 }
      });
    }
  }

附加阅读：如果您仍然需要了解如何在setState中使用函数，我可以推荐这篇文章：