Question

我正在构建一个React应用，该应用在按下“下一步”和“后退”按钮时呈现不同的net组件。我面临的问题是这两个按钮都对上一次按下按钮有反应。就像如果第一次按下一步，则什么也不会发生。如果这样的话，我按回来，这是对上一个按钮的下一个响应。

PropertyChanged

Answer 1

React中的

setState由React批处理，这实际上意味着，如果您一个接一个地执行3个设置状态调用，则它们将依次被调用。

我建议阅读official docs以获得更多详细信息。

现在，解决您的问题：您正在基于该状态下的“先前值”设置状态：

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

由于批处理模式，这将导致“意外”行为，因为this.state.i在实际被调用时可能已更改。

这是React文档建议做的事情：

setState（）并不总是立即更新组件。它可能批处理或将更新推迟到以后。这使得阅读this.state 在调用setState（）之后立即发生潜在的陷阱。相反，使用 componentDidUpdate或setState回调（setState（updater，回调））

还有setState方法的第二个签名，该签名接受带有以下签名的 function ：(state, props) => stateChange，其中props是可选的，如果您不这样做的话想使用它，不需要通过它。

您似乎在犯的常见错误是在调用this.state之后阅读this.setState，这是行不通的。

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

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中使用函数，我可以推荐这篇文章：https://medium.freecodecamp.org/functional-setstate-is-the-future-of-react-374f30401b6b

Answer 2

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的更多信息，请参见article，尤其是标题为“状态更新可能是异步的”的部分。

下一个和上一个按钮无法正常工作

2 个答案: