老师，错误边界是出现了，但是是在错误遮罩下面

Question

定义错误展示形式

import React, { Component } from 'react'

export default class ErrorBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }
    static getDerivedStateFromError(error) {
        // 更新 state 使下一次渲染能够显示降级后的 UI
        console.log('error')
        return { hasError: true };
    }
    render() {
        if (this.state.hasError) {
            // 你可以自定义降级后的 UI 并渲染
            return <h1>Something went wrong.</h1>;
        }
        return this.props.children;
    }
}

设置错误边界

import React, { lazy, Suspense, useState, startTransition } from 'react'
import ErrorBoundary from './07_ErrorBoundary'
const Welcome = lazy(() => import('../components/Wellcome'))
const Welcome2 = lazy(() => import('../components/Wellcome2'))
export default function App() {
  const [show, setShow] = useState(true)
  const handleClick = () => {
    startTransition(() => {
      // 延后执行
      setShow(!show)
    })
  }
  return (
    <div>
      {/* 组件没有加载前就会显示loading */}
      <button onClick={handleClick}>点击</button>
      {/* 处理错误边界 */}
      <ErrorBoundary>
        <Suspense fallback={<div>loading</div>}>
          {show ? <Welcome /> : <Welcome2 />}
        </Suspense>
      </ErrorBoundary>

    </div>
  )
}

Answer 1

西门老舅 2023-06-03 22:16:30

这个错误的提示方式，是需要自己定义的，在错误边界的JSX中自己指定表现形式

• 提问者 Panda_io #1

  老师我应该是指定了，代码已经贴上，辛苦老师空了看看

• 西门老舅 回复 提问者 Panda_io #2

  这个遮罩层是在报错的时候，脚手架内置的控制台（也是一个插件），这个在开发模式下是有这个层的，如果在生产环境下是没有的，所以不用担心

• 提问者 Panda_io 回复 西门老舅 #3

  好的明白了谢谢老师！