Question

我有一个简单的组件，在我的React应用程序中充当错误边界，并将任何错误传递给日志服务。

它看起来像这样：

export class CatchError extends React.PureComponent {
  state = {
    hasError: false
  }

  componentDidCatch(error, info) {
    this.props.log({ error, info })
    this.setState({ hasError: true })
  }

  render() {
    const child = typeof this.props.children === "function"
      ? this.props.children({ error: hasError })
      : children

    return React.cloneElement(child, { error: this.state.hasError })
  }
}

是否有一个相当于componentDidCatch的React钩子，所以我可以使该组件成为函数而不是类？

所以它可能看起来像这样：

export function CatchError({ children, log }) {
  const [hasError, setHasError] = useState(false)
  const caught = useDidCatch()

  useEffect(() => {
    const [error, info] = caught
    log({ error, info })
    setHasError(true)
  }, [caught])

  const child = typeof children === "function"
    ? children({ error: hasError })
    : children

  return React.cloneElement(child, { error: hasError })
}

Answer 1

没有相当于componentDidCatch的React钩子。

但是，React团队计划尽快添加一个。

React文档状态：

尚不存在与常见的getSnapshotBeforeUpdate和componentDidCatch生命周期相对应的Hook等效项，但我们计划尽快添加它们。

了解更多：https://reactjs.org/docs/hooks-faq.html#do-hooks-cover-all-use-cases-for-classes

Answer 2

反应中没有Error Boundaries（componentDidCatch）的官方钩子。但是您只需使用try...catch来捕获组件错误，如下所示：

function myComponent(...) {
  // Initialize state variables.
  // Initialize context variables.
  // Initialize custom hooks.
  // ...

  try {
    // Define internal functions.
    // Define internal variables.

    return (
      <SomeThing />
    )
  } catch (error) {
    // Catch internal functions, variables and return (jsx) errors.
    // You can also create a lib to log the error to an error reporting service
    // and use it here.
  }
}

try...catch块是此处的错误边界。

限制：当您使用useEffect之类的钩子并在其中使用某些internal functions时，您不能将该内部函数放入try ... catch（Error Boundary）块中，因为您应该在useEffect之上定义该函数钩（why?），则不应有条件地使用useEffect（why?）！

Answer 3

如前所述，React 团队有 not yet implemented a hook equivalent，还有 no published timelines 用于钩子实现。

npm 上的一些第三方包实现了错误边界挂钩。这是most popular npm package。或者，我发布了 react-use-error-boundary，试图重新创建一个类似于 useErrorBoundary from Preact 的 API。

反应钩子等效于componentDidCatch？

3 个答案: