Tengo la siguiente clase de JavaScript que funciona. Espero que haya una forma ES6 de hacerlo sin tener que usar la palabra clave constructor y también minimizar el uso de this . He intentado declaraciones como
state = {hasError: false}
y eso funciona solo para hasError, pero no puedo entender cómo manejar la función de vinculación. Espero no tener que hacer eso como si no tuviera que usar esto para acceder al estado con la nueva sintaxis.
export default class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; this.updateHasErrorsToFalse = this.updateHasErrorsToFalse.bind(this); } updateHasErrorsToFalse() { this.setState((prevState) => ({ hasError: false, })); } //state = { hasError: false, error: null, }; static getDerivedStateFromError(error) { return { hasError: true, error: error.message }; } componentDidCatch(error, errorInfo) { // You can also log the error to an error reporting service console.log(error, errorInfo); } updateHasErrorsToFalse() { this.setState((prevState) => ({ hasError: false, })); } render() { function addExtraProps(Component, extraProps) { return <Component.type {...Component.props} {...extraProps} />; } if (this.state.hasError) { return addExtraProps(this.props.fallback, { error: this.state.error, resetError: this.updateHasErrorsToFalse, }); } return this.props.children; } }Al hacer lo siguiente, vincula this para que function manualmente.
this.updateHasErrorsToFalse = this.updateHasErrorsToFalse.bind(this); En lugar de eso, puede usar la notación de función de flecha que tiene el enlace léxico de this .
updateHasErrorsToFalse = () => { this.setState((prevState) => ({ hasError: false, })); } Y puede eliminar el constructor y tener una instancia de state como se muestra a continuación.
En vez de
constructor(props) { super(props); this.state = { hasError: false }; this.updateHasErrorsToFalse = this.updateHasErrorsToFalse.bind(this); }Solo sigue siguiendo en el nivel de clase
state = { hasError: false };