React错误边界不适用于React v16.9

Question

这是我的错误边界文件-

class ErrorHandling extends Component {
    state = { hasError: false }

    componentDidCatch() {
        this.setState({ hasError: true })
    }

    render() {
        // debugger
        if (this.state.hasError) {
            return <div>Error in Component</div>
        }
        return this.props.children
    }
}

另一个文件是-

import React, { Component } from 'react';

///故意在“ d”下方添加了语法错误

function Intermediate(props) {
    return <h1>hi</h1>;d
}
export default Intermediate

在我的App.js中

        <ErrorHandling>
          <Intermediate />
        </ErrorHandling>

这导致应用程序中断而没有捕获错误。这是浏览器屏幕上看到的错误

此处有更详细的版本- https://codepen.io/meghana1991/pen/abojydj?editors=0010

当我在本地使用相同的代码并带有上面列出的多个文件时，它不起作用

Answer 1

问题是：您在 React 文档示例中看到的漂亮的后备 UI 只出现在生产环境。所以你必须运行建议的 create-react-app (id you use it) 命令：

npm run build
# wait for it to finish
serve -s build

然后在浏览器中打开 localhost:5000（如果您在提到的终端中看到此地址）。这样 React 文档示例就可以正常工作。

Answer 2

您无法捕获编译时错误，error-boundary用于UI中的运行时错误。

请参阅Compile time vs run time errors。

此外，您必须use getDerivedStateFromError才能在后备UI上添加其他渲染：

class ErrorBoundary extends React.Component {
  state = {
    hasError: false,
    error: { message: '', stack: '' },
    info: { componentStack: '' }
  };

  static getDerivedStateFromError = error => {
    return { hasError: true };
  };

  componentDidCatch = (error, info) => {
    this.setState({ error, info });
  };

  render() {
    const { hasError, error, info } = this.state;
    const { children } = this.props;

    return hasError ? <ErrorComponent/> : children;
  }
}

要检查您的ErrorBoundary在组件树的可达部分中抛出错误：

throw new Error('Error thrown');

// <button onClick={() => throw new Error('Error thrown')}>Throw Error</button>