react ErrorBoundary在引用赋值失败时呈现自身的多个副本

ukxgm1gy 于 2022-10-28 发布在 React

关注(0)|答案(6)|浏览(144)

*您要请求 * 功能 * 还是报告 * 错误？

窃听器

当前行为是什么？

如果在赋值ref的过程中发生错误（也可能是其他情况），则错误边界可能会混淆，并在同一父对象中多次呈现。请参见https://codesandbox.io/s/stoic-fermi-6etqb，它呈现：

<div id="root">
  <div class="boundary"><span>content</span></div>
  <div class="boundary"><span>error</span></div>
</div>

预期的行为是什么？

<div id="root">
  <div class="boundary"><span>error</span></div>
</div>

react

来源：https://github.com/facebook/react/issues/16365

6条答案

按热度按时间

crcmnpdw1#

这是新的Bug吗？

赞(0）回复(0）举报 2022-10-28

5lhxktic2#

在该沙箱上的版本之间切换，它首先出现在react-dom@16.3.0-alpha.1中。

赞(0）回复(0）举报 2022-10-28

vtwuwzda3#

这个问题还没有解决吗？如果是的话，我试试。

赞(0）回复(0）举报 2022-10-28

lkaoscv74#

@gaearon介意我把这个拿上去吗？

赞(0）回复(0）举报 2022-10-28

yfjy0ee75#

您是否应该使用getDerivedStateFromError而不是componentDidCatch来设置错误状态：

class ErrorBoundary extends React.Component {
  state = { err: null };

  static getDerivedStateFromProps(err) {
    return { err };
  }

  // componentDidCatch = err => this.setState({ err });
  // ^ This should only be used for side effects. E.g logging errors etc

  render() {
    return (
      <div className="boundary">
        {this.state.err ? <span>error</span> : this.props.children}
      </div>
    );
  }
}

编辑：https://codesandbox.io/s/brave-mahavira-g9n5x

赞(0）回复(0）举报 2022-10-28

wdebmtf26#

您不应该使用getDerivedStateFromError而不是componentDidCatch吗
理想情况下，两者都应该工作，但我刚刚测试了getDerivedStateFromError，它似乎不受这个问题的影响。
getDerivedStateFromError版本请参阅https://codesandbox.io/s/recursing-dawn-l029b。两个版本都需要翻转其中的第7行和第8行。在componentDidCatch版本中，需要手动消除错误覆盖才能看到双重渲染。

赞(0）回复(0）举报 2022-10-28

我来回答

react ErrorBoundary在引用赋值失败时呈现自身的多个副本

6条答案

相关问题

热门标签

最新问答