javascript 隐含React错误“unstable_flushDiscreteUpdates:React已在呈现时无法刷新更新,”

alen0pnh  于 2022-12-21  发布在  Java
关注(0)|答案(3)|浏览(532)

bounty将在6天后过期。回答此问题可获得+50声望奖励。Mark希望引起更多人关注此问题。

我只能找到有关此错误的有限信息,希望有人能够深入解释导致此错误的确切原因。我最近没有更改任何似乎显示在调用堆栈中的代码,因此我想知道这是否来自较新的更新?

wbgh16ku

wbgh16ku1#

在我的例子中,错误/警告是由react-block-ui包引起的。目前在那个包的github上有一个opened issue。这个问题到目前为止还没有解决。
这是一个React问题。你可以检查是否有任何第三方软件包导致这个问题。你可以检查这个问题,看看错误是从哪里来的。我发现这些评论从那里-

// 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.

希望这能帮上忙。

vcirk6k6

vcirk6k62#

我的问题是把debugger放进代码里。一旦我把它移走,错误就消失了。所以以防万一

0mkxixxg

0mkxixxg3#

我花了很多时间在我的项目中调试一个类似的问题。最后,我们在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,这样调用就可以在渲染周期之外进行。
希望这对来这里的人有帮助!

相关问题