Reactjs React错误处理未按预期工作

我正在尝试处理我的React应用程序中的一些错误，但一定有什么东西逃过了我的视线，因为我似乎无法让它工作。这是我的密码：

App.js

import ErrorBoundary from "./Error";
import ChildComponent from "./ChildComponent";

function App() {
  return (
    <ErrorBoundary>
      <ChildComponent />
    </ErrorBoundary>
  );
}

export default App;

---

也许我在这里错了，但我希望应用程序能够打开、运行

、遇到

新错误（“伪错误”）

并呈现

的回退UI，然后保持不变。相反，它会在几秒钟内显示后备UI，然后继续使应用程序崩溃并显示验尸报告。为什么？

你的应用程序继续崩溃的原因是你没有设置

this.state.error

，因此每次渲染都会继续调用

props.children

，这会不断导致虚拟错误崩溃

只需在

didCatch

中调用

this.setState（{hasError:true}）

，渲染函数就会正确返回错误消息：）

---

---

编辑：我刚刚注意到您也在使用

getDeriveStateFromError

。您的组件DIDCATCH与它冲突。您的组件正在did catch中“捕获”，将其记录下来，然后您的静态方法无法捕获，因为错误已经被处理。

查看react error boundary的文档，您似乎需要将error.jsx作为道具传递到error boundary，如下所示：

。你是这样做的吗？也许在这里的例子中删除了它？@Thaleskene我一定是给我的问题贴错了标签，我没有意识到react error boundary是一个npm包。我正在按照错误边界上的React文档进行操作，正如我在中所做的那样，不幸的是，问题仍然存在。我仍然会在很短的时间内显示正确的UI，然后应用程序崩溃。奇怪的是，组件检测到错误并将其记录下来，但不知何故仍试图呈现

您看到我的编辑了吗？这可能是问题的原因，我试着解决了这两个问题，但仍然不起作用。我在这里和那里添加了一些

console.log

s，我发现应用程序的流程是我所期望的：

ChildComponent.componentDidMount

只调用一次，而

ErrorBoundary

只呈现一次回退ui，没有再次呈现

ChildComponent

。因此，尽管

ErrorBoundary

工作正常，React还是会导致应用程序崩溃。奇怪，真有趣。你的反应是什么？我想可能就是这样吧？谢谢您抽出时间，我非常感谢。

import React, { Component } from "react";

class ChildComponent extends Component {
  state = {};
  componentDidMount() {
    console.log("componentDidMount called")
    throw new Error("dummy error");
  }
  render() {
    return <p>This will never be shown</p>;
  }
}
export default ChildComponent;

class ErrorBoundary extends Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.log(error.message);
  }

  render() {
    if (this.state.hasError) {
      console.log("rendering fallback ui")
      return <h1>Error!</h1>;
    }
    console.log("rendering standard ui")
    return this.props.children;
  }
}
export default ErrorBoundary;

> rendering standard ui
> componentDidMount called
> [JAVASCRIPT error logs]
> rendering fallback ui
> dummy error
> [APP CRASH]