Saltar al contenido

Cómo coger los errores en el uso de reaccionar de error boundariesDec, 29thIn este tutorial, vamos a aprender acerca de los límites de error en …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de los límites de error en reaccionar.

¿Qué es un límite de error?

En el pasado, no tenemos una manera de atrapar a los errores en React componentes y estamos seeingsome errores crípticos en caso los descansos de aplicaciones.

Reaccionar 16 introduce una nueva forma de detectar los errores mediante el uso de los límites de error. límites de error

son reaccionan componentes que nos ayuda a atrapar a los errores en cualquier lugar de nuestra aplicación y hace que la interfaz de usuario de reserva. límites de error

no se rompen todo el árbol de componentes de aplicaciones en lugar de que sólo hace que el repliegue se produjo uion componente de un error. límites de error

sólo se definen en unos componentes basados ​​en clases. de

Veamos un ejemplo

Estamos utilizando el método componentDidCatch ciclo de vida para actualizar el estado de errores y el registro de la errorInfo en la consola. componente

class ErrorBoundary extends Component {
state = {
error: false,
errorInfo: null
};
componentDidCatch(error, errorInfo) {
this.setState({
error: error,
errorInfo: errorInfo
});
}

render() {
if (this.state.error) {
return (

Something went wrong

{this.state.error && this.state.error.toString()}

Error occured {this.state.errorInfo.componentStack}

);
}

return this.props.children;
}
}

El ErrorBoundary sólo sirve para hacer la interfaz de usuario alternativa en caso de un error ha ocurrido lo contrario, están haciendo que los niños. el uso de

Let el componente ErrorBoundary para coger los errores.

function User(props) {
return

{props.user.name}

;
}

function App(props) {
return (




Date Component is working

);
}

En el código anterior, se envolvió el componente de bienvenida con un componente ErrorBoundary. Salida

Nuestro componente de fecha está aún válido solamente usuario componente encuentra prestando thefallback interfaz de usuario (mensaje de que algo salió mal) funcionando porque no hemos podido pasar el puntal user.name.

Dónde colocar componentes ErrorBoundary?

Se puede utilizar en el nivel superior de los componentes de la aplicación o se puede envolver en los componentes individuales para detener la ruptura de las otras partes de la aplicación.