如何使用 React Hooks 组件实现错误边界

Question

我们如何在 React Hooks 中实现错误边界。它甚至支持 React Hooks 吗？

Answer 1

您可以借助react-error-boundarypackage.json 在 React hook 中实现错误边界。

npm install --save react-error-boundary

然后：

import {ErrorBoundary} from 'react-error-boundary'

function ErrorFallback({error, resetErrorBoundary}) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )
}

const ui = (
  <ErrorBoundary
    FallbackComponent={ErrorFallback}
    onReset={() => {
      // reset the state of your app so the error doesn't happen again
    }}
  >
    <ComponentThatMayError />
  </ErrorBoundary>
)

请阅读有关React-error-boundary的更多内容

Answer 2

问题是是否可以将 Error Boundary 实现为钩子，答案是否定的，但这并不意味着您不能在大量使用钩子的项目中使用 Error Boundary 类组件。

创建一个 Error Boundary 类组件并用 Error Boundary 类组件包装你的 React 功能组件（钩子）。

Answer 3

我写了react-use-error-boundary来实现这一点。

React 16 引入了错误边界。截至 React 17，函数组件仍然没有等效的钩子。

我喜欢 Preact 的useErrorBoundary实现的 API ，并尝试重新创建一个类似的 API。如果您有兴趣从头开始构建它，您可以在 GitHub 上查看代码。

Answer 4

*钩子中还没有错误边界*

componentDidCatch 
and 
getDerivedStateFromError 

这些方法还没有 Hook 等价物，但很快就会添加。

Answer 5

你不能用钩子做到这一点。钩子没有与 componentDidCatch 等效的东西。请参阅钩子常见问题的这一部分