神秘的 React 错误“unstable_flushDiscreteUpdates：React 已经呈现时无法刷新更新。”答案

【问题标题】：Cryptic React error "unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering."神秘的 React 错误“unstable_flushDiscreteUpdates：React 已经呈现时无法刷新更新。”
【发布时间】：2020-01-27 02:22:44
【问题描述】：

我已经能够找到有关此错误的有限信息，并希望有人可以深入解释究竟是什么原因造成的。我最近没有更改任何似乎出现在调用堆栈中的代码，所以我想知道这是否来自较新的更新？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

就我而言，错误/警告是由 react-block-ui 包引起的。目前该软件包的 github 上有一个opened issue。到现在这个问题还没有解决。

这是一个反应问题。您可以检查是否有任何第三方软件包导致此问题。您可以检查this 以查看错误的确切来源。我从那里找到了这些 cmets -

// We're already rendering, so we can't synchronously flush pending work.
// This is probably a nested event dispatch triggered by a lifecycle/effect,
// like `el.focus()`. Exit.

我希望这会有所帮助。

【讨论】：

我无法再访问其中的代码库，但我们肯定在代码中广泛使用了el.focus()。感谢您的回复。

【解决方案2】：

我花了很长时间在我的项目中调试一个类似的问题。最后，我们在setState 函数中调用了focus，但这可以被回调完全隐藏。在我们的例子中，这是在看这个：

class ChildComponent extends React.Component {
  func() {
    this.setState(state => {
      // ... Doing something
      this.props.onStateChange();
      // ... Returning some state
    });
  }
}

然后在其他地方：

  onStateChange = () => {
    this.element.focus();
  };

  render() {
    return <ChildComponent onStateChange={this.onStateChange} />;
  }

我通过在componentDidUpdate中调用回调解决了这个问题：

class ChildComponent extends React.Component {
  func() {
    this.setState(state => {
      // ... Doing something
      // ... Returning some state
    });
  }

  componentDidUpdate(prevProps, prevState) {
    if (compare(prevState, this.state)) {
      this.props.onStateChange();
    }
  }
}

另一个可能的解决方案：我的一位同事还建议在 setState 中使用 requestAnimationFrame，以便调用将在渲染周期之外发生。

希望这对来这里的人有所帮助！

【讨论】：