使用了componentDidCatch页面仍然报错是怎么回事？

Question

问题描述

写了一个componentDidCatch的demo，说是可以阻止渲染的错误在页面上显示，防止页面崩溃，但是我的结果是错误的提示一闪而过，页面还是报错了，怎么回事？

相关代码

import React, { Component, lazy, Suspense } from "react";

const About = lazy(() => import("./About"));
export default class Main extends Component {
  state = {
    hasError: false,
  };
  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }
  componentDidCatch() {
    //this.setState({ hasError: true });
  }
  render() {
    const { hasError } = this.state;
    if (hasError) {
      return <h1>组件获取失败！</h1>;
    }
    return (
      <div>
        <Suspense fallback={<div>loading,please wait……</div>}>
          <About />
        </Suspense>
      </div>
    );
  }
}

你期待的结果是什么？实际看到的错误信息又是什么？

页面上应该是显示组件获取失败！,但是

Answer 1

开发环境下你想展示的错误页面会一闪而过，正式环境下会一直展示错误页面，你可以打包之后看一下

Answer 2

这是生产环境用的

Answer 3

因为开发环境捕获错误后仍会冒泡至window，所以一般会触发overlay，比如你用了react-refresh默认就会带这个。但是这个不会带到生产环境。所以你直接关掉这个就好了

Answer 4

About 组件有问题，是不是路径错了？