React hooks equivalent of componentDidCatch?

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

在 react 中没有任何官方的 Error Boundaries(componentDidCatch( 钩子。 但您可以简单地使用尝试...捕获以捕获组件错误，如下所示：

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 钩子之上定义该函数(为什么？(，并且你不应该有条件地使用 useEffect(为什么？(！

Answer 3

如前所述，React 团队尚未实现钩子等效物，也没有发布钩子实现的时间表。

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