Estoy tratando de crear un límite de error pero no funciona. El componenteDidCatch no se dispara.
Esperaba que la interfaz de usuario alternativa se renderizara, pero en realidad la interfaz de usuario original todavía está allí y no sucede nada.
const SimpleBtn = lazy(() => import("./componentJsx/SimpleBtn.jsx")); const SimpleBtn2 = lazy(() => import("./componentJsx/SimpleBtn2.jsx")); class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { error: "", errorInfo: "" }; } static getDerivedStateFromError(error) { return error; } componentDidCatch(error, errorInfo) { this.setState({ error, errorInfo }); console.log(error, errorInfo); } render() { return this.state.errorInfo ? ( <> <h3>Something is wrong!</h3> <details>{this.state.error}</details> </> ) : ( this.props.children ); } } class App extends React.Component { constructor(props) { super(props); this.state = { toggle: false, hasError: false }; } toggleBtn = () => { // use transition startTransition(() => { this.setState((state) => ({ toggle: !state.toggle, })); }); }; render() { const { toggle } = this.state; return ( <ErrorBoundary> <Suspense fallback={<div>...Loading</div>}> <h1> Sample file </h1> {toggle && <SimpleBtn toggleBtn={this.toggleBtn} />} <SimpleBtn2 toggleBtn={this.toggleBtn} /> <button onClick={() => { throw new Error("i am error!"); }} > Throw Error </button> </Suspense> </ErrorBoundary> ); } }
Encontré una pregunta similar pero no respondió.
Traté de escribir el código como en la documentación oficial de reacción, pero aún no funciona y ¡tampoco puedo resolver el problema!
Después de usar la pestaña Componentes, me di cuenta de que el estado de error no cambia.
Esto se debe a que los límites de error solo funcionan para los errores generados durante el procesamiento. Si arroja un error en una función de representación de componentes, funcionará.
Si desea capturar errores en los controladores de eventos, deberá registrar un controlador de errores en la ventana o realizar un manejo de errores local.
Si solo está tratando de probar su límite de error, agregue un renderizado de componente en su lugar y cargue condicionalmente ese componente si lo desea.
Consulte https://reactjs.org/docs/error-boundaries.html#how-about-event-handlers