прямоугольная граница ошибок не работает должным образом

Question

При использовании реакции-границы и выдаче ошибки вручную граница ошибки работает! Проблема в том, что через 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>
  );
}

А вот поведение:https://i.stack.imgur.com/KKaRg.gif

Answer 1

Для тех, кому интересно, я только что узнал, что он действительно работает правильно. Отображается резервный вариант ErrorBoundary, и поскольку NODE_ENV настроен на разработку, отображается наложение отладки. Когда вы устанавливаете display: none для наложения iframe вы увидите ожидаемое сообщение «Что-то пошло не так».