rect 错误边界无法正常工作答案

【问题标题】：rect error-boundary doesn't work properlyrect 错误边界无法正常工作
【发布时间】：2021-02-24 16:24:37
【问题描述】：

当使用 react-boundary 并抛出手动错误时，错误边界有效！问题是，在 1-2 秒后，它会呈现错误，就好像没有错误边界

这是代码

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  render() {
    console.log('has error', this.state);
    if ((this.state as any).hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

function Bomb(): any {
  const a = null;
  return <span>{a.b.c}</span>;
}

function App() {
  const [explode, setExplode] = React.useState(false);

  return (
    <div>
      <button onClick={() => setExplode((e) => !e)}>toggle explode</button>
      <ErrorBoundary>{explode ? <Bomb /> : null}</ErrorBoundary>
    </div>
  );
}

这是行为：

【问题讨论】：

标签： javascript reactjs react-error-boundary

【解决方案1】：

对于那些感兴趣的人，我刚刚发现它实际上可以正常工作。呈现 ErrorBoundary 回退，并且由于 NODE_ENV 设置为开发，因此出现调试覆盖。当您将 display: none 设置为覆盖 iframe 时，您会看到预期的“出现问题”。

【讨论】：