rect错误边界无法正常工作

问题描述

在使用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>
  );
}

这是行为:

enter image description here

解决方法

对于那些感兴趣的人,我刚刚发现它实际上可以正常工作。 ErrorBoundary 回退被渲染,因为 NODE_ENV 被设置为 development,所以会出现调试覆盖。当您将 display: none 设置为叠加 iframe 时,您会看到预期的“出现问题。”。