React 中的错误边界无法按预期工作 [重复]答案

【问题标题】：error boundary in React doesn't work as expected [duplicate]React 中的错误边界无法按预期工作 [重复]
【发布时间】：2025-12-18 23:50:02
【问题描述】：

我使用react-error-boundary 来实现<ErrorBoundary>，将它包裹在可能引发错误的组件周围


export default function App() {
  const [query, setQuery] = useState("");
  const handleReset = () => setQuery("");
  return (
    <div className="App">
      <input
        value={query}
        onChange={(e) => {
          setQuery(e.target.value);
        }}
      />

      <FormErrorBoundary onReset={handleReset} resetKeys={[query]}>
        <Form query={query} />
      </FormErrorBoundary>
    </div>
  );
}

function Form({ query }) {
  if (query === "error") throw new Error("foo");

  return <p>{query}</p>;
}

function FormErrorBoundary(props) {
  return <ErrorBoundary FallbackComponent={ErrorFallBack} {...props} />;
}

function ErrorFallBack({ error, resetErrorBoundary }) {
  return (
    <div role="alert">
      There was an error
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

我们的想法是，当我们在输入字段中键入 error 时，Form 组件应该抛出一个错误，并且错误边界应该捕获它并显示一个带有重试按钮的 UI

但是，如果我在输入字段中输入 error，应用程序仍然会崩溃。看看这个截图。

只有在您点击x 关闭它后，您才能看到错误边界正在工作，并且您可以点击重试按钮。但我认为错误边界会阻止它崩溃。我是不是实现错了，或者这是 React 中错误边界的预期行为？

现场演示：https://codesandbox.io/s/error-boundary-bz2ir?file=/src/App.js

【问题讨论】：

标签： javascript reactjs react-error-boundary

【解决方案1】：

如果您处于开发模式，您将始终看到错误堆栈。如果您在启动错误时获得生产模式应用程序版本，您将只看到错误边界。（如果一切正常）

【讨论】：