Question

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

Answer 1

用钩子不能做到这一点。挂钩没有等效的componentDidCatch。参见this section of the hook FAQ

Answer 2

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

componentDidCatch 
and 
getDerivedStateFromError

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

Answer 3

您可以在 react-error-boundary 包的帮助下在 React 钩子中实现错误边界。

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 4

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

创建一个错误边界类组件，并使用错误边界类组件包装您的React Functional Components（挂钩）。

Answer 5

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

React 16 引入了 Error Boundaries。从 React 17 开始，函数组件仍然有 not an equivalent hook。

我喜欢 Preact 的 useErrorBoundary 实现的 API，并尝试重新创建一个类似的 API。如果您有兴趣从头开始构建它，您可以checkout the code on GitHub。

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

5 个答案: