反应事件处理

Question

考虑编辑框。用户键入一些文本。有一个按键处理程序附加，它执行如下操作：

setState({echo: this.state.echo + event.char})

是否可能在初始状态{echo: “”}中，用户键入“a”然后“b”，然后响应调用onKeyPress(“a”)，后者调用setState({echo: “a”})，然后-在setState被React - React calls onKeyPress(“b”)实际应用之前。

你看到了一个问题，对吗？OnKeyPress(“b”)会看到和OnKeyPress(“a”)一样的旧状态{echo: “”}，并且会发布setState({echo: “”+“b”})，也就是setState({echo: “b”}) --而我们显然想要{echo: “ab”}。

• 我的测试显示，在完全处理第一个setState之前，不会调用第二个事件处理程序。但是，一些测试可能是谎言，不像一些有记录的合同。
• 我意识到这个问题有解决方案，比如使用表单setState( state => …)
• 但我还是想知道:这种情况是否可能。也许只有当所有挂起的setState处理(由前一个处理程序引起)完成时，才能保证执行合成事件处理程序？如果是的话，我在哪里能读到这方面的证据？某个手册中的特定位置，或网络…上发布的限定答案或者，也许恰恰相反--不存在这样的保证(然而，如果是这样的话，“简单”形式的setState肯定会导致错误，它们根本不应该允许这种形式)。

Answer 1

由于这是我第二次对类似的问题没有明确的答案，我只能推断出至少在理论上有上述情况的可能性。然后，我们最好在所有情况下都遵循文档，并且只使用基于函数的setState从上一个状态推断下一个状态。

Answer 2

setState总是有序的，但是您给出的论点可以依赖于过去的状态。setState调用(例如来自两个按键的调用)可以合并并在下一个周期中调用。

这就是你在第二点中提到的解决方案存在的原因，也是解决这个问题的正确方法。您在问题中描述的方式，简单地连接状态值和按下的键，正是docs 劝阻的方式。

Answer 3

我建议您利用组件生命周期方法componentDidUpdate和componentWillUpdate。在这些方法之间，将有一个呈现周期。这使您能够对更改的内容做出响应。

不要试图在捕获键时将当前按键字符追加到现有字符串中，而是尝试在componentDidUpdate()中追加该字符。

在这种情况下，您只需将当前的按键存储在状态(例如，currKey)。然后在componentDidUpdate()中，可以添加如下内容：

componentDidUpdate(prevProps, prevState) {
  const { currKey, echo } = this.state;
  if (currKey !== '') {
    this.setState({
      echo: echo + currKey, // append the current key to echo
      currKey: '' // reset the current key
    });
  }
}

这里的setState将触发另一轮更新，但是在这一轮中，currKey将为空，这意味着在按下另一个键之前，逻辑不会再次执行。