Javascript React错误边界不使用React

这是我的错误边界文件-

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
    }
}

类错误处理扩展组件{
状态={hasError:false}
componentDidCatch（）{
this.setState（{hasError:true}）
}
render（）{
//调试器
if（this.state.hasError）{
组件中的返回错误
}
归还这个。道具。孩子们
}
}

另一个文件是-

import React, { Component } from 'react';

// Intentionally I have added syntax error below 'd'

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

import React，{Component}来自'React'；
//我故意在“d”下面添加了语法错误
功能中介（道具）{
返回hi；d
}
导出默认中间值

在我的App.js中

<ErrorHandling>
  <Intermediate />
</ErrorHandling>

它会导致应用程序中断而无法捕获错误。以下是浏览器屏幕上显示的错误

这里有更详细的版本-

---

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

您无法捕获编译时错误，这些错误用于UI中的运行时错误

参考

此外，为了在回退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;
  }
}

---

注意：在development env中，您将始终看到错误覆盖，除非您关闭它或用X按钮关闭它。

---

完整示例：

const ErrorComponent = () => {
  return <h1>Something went wrong</h1>;
};

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;
    console.log(error, info);
    const { children } = this.props;

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

const ButtonComponent = () => {
  throw Error("error!");
  return <></>;
};

const App = () => {
  return (
    <ErrorBoundary>
      <ButtonComponent />
    </ErrorBoundary>
  );
};

const ErrorComponent=（）=>{
返回出了问题的地方；
};
类ErrorBoundary扩展了React.Component{
状态={
错误：错，
错误：{消息：，堆栈：}，
信息：{componentStack:}
};
静态getDerivedStateFromError=错误=>{
返回{hasError:true}；
};
componentDidCatch=（错误，信息）=>{
this.setState（{error，info}）；
};
render（）{
const{hasError，error，info}=this.state；
console.log（错误、信息）；
const{children}=this.props；
返回hasError？：子项；
}
}
常量按钮组件=（）=>{
抛出错误（“错误！”）；
返回；
};
常量应用=（）=>{
返回(
);
};

---

现在就尝试这个。但不幸的是，它不起作用。我仍然可以在我的应用程序屏幕上看到错误。在development env中，您将始终看到错误覆盖，除非您使用

X

按钮将其关闭或关闭。此外，请将您看到的添加到您的问题中，我们无法猜测添加的内容。请check@ShamseerAhammed更新了示例，您无法从事件处理程序（如

onClick

）捕获错误，感谢您的关注。

const ErrorComponent = () => {
  return <h1>Something went wrong</h1>;
};

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;
    console.log(error, info);
    const { children } = this.props;

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

const ButtonComponent = () => {
  throw Error("error!");
  return <></>;
};

const App = () => {
  return (
    <ErrorBoundary>
      <ButtonComponent />
    </ErrorBoundary>
  );
};