No puedo encontrar una buena manera de restablecer un ErrorBoundary desde fuera del componente. Debido al diseño de la interfaz de usuario de la aplicación, tengo un botón "Reintentar" fuera del componente ErrorBoundary que, cuando se hace clic, debe restablecer el estado de error dentro de ErrorBoundary .

Por ejemplo, tengo un ErrorBoundary bastante estándar:

 class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, errorInfo) { console.error(error); } render() { if (this.state.hasError) { return <h1>Something went wrong.</h1>; } return this.props.children; } }

Y en mi aplicación principal, tengo algo así:

 const BadComponent = (props) => { return ( <button onClick={() => { throw new Error("Something happened!") }}>Trigger Error</button> ); } function App() { return ( <div> <button onClick={() => { // How to reset ErrorBoundary here when button is clicked? }}>Retry again</button> <ErrorBoundary> <BadComponent /> </ErrorBoundary> </div> ) }

Del ejemplo anterior, tengo un BadComponent que generará un error cuando se haga clic en él. También tengo un botón Reintentar en mi componente principal de la App que se supone que restablece el estado de error dentro de ErrorBoundary para que vuelva a representar a los elementos secundarios (que es BadComponent ).

Sin embargo, el estado de error está dentro del componente ErrorBoundary y no puedo controlar directamente el estado de error desde fuera. No puedo pasar accesorios a ErrorBoundary para el estado de error porque el error en este caso es capturado y administrado por y dentro del componente ErrorBoundary y no por el componente App .

Si utilizo un accesorio solo para indicar si el error debe restablecerse, tendré que mantener el estado de error y otro accesorio de error dentro de ErrorBoundary y asegurarme de que sean consistentes, lo que se siente incómodo.

Entonces, ¿cómo puedo restablecer el estado de error del componente ErrorBoundary ? Sería genial si hay un ejemplo de cómo debo hacerlo.