1

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

这是行为: 在此处输入图像描述

4

1 回答 1

0

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

于 2021-05-17T20:03:41.870 回答