ComponentDidCatch funktioniert nicht

Question

Warum componentDidCatch funktioniert nicht in meiner reagierenden nativen App. componentDidCatch behandelt keine Fehler.

React native v: 50.3 
React: 16.0.0 

import React, {Component} from 'react'; 
 
import {View, Text}  from 'react-native'; 
 
import Logo    from './SignUpInit/Logo'; 
 
import SignUp    from './SignUpInit/SignUp'; 
 
import Social    from './SignUpInit/Social'; 
 
import styles    from './SignUpInit/styles'; 
 

 
export default class SignUpInit extends Component { 
 

 
    state = { 
 
     componentCrashed: false, 
 
     count: 0, 
 
    } 
 

 
    componentDidCatch(error, info) { 
 
     console.log(error); 
 
     console.log(info); 
 
     console.log('_______DID CATCH____________'); 
 
     this.setState({componentCrashed: true}); 
 
    } 
 

 
    componentDidMount(){ 
 
     setInterval(()=>this.setState({count: this.state.count+1}),1000); 
 
    } 
 

 
    render() { 
 
     if (this.state.componentCrashed) { 
 
      return (
 
       <View> 
 
        <Text> 
 
         Error in component "SingUpInit" 
 
        </Text> 
 
       </View> 
 
      ); 
 
     } 
 

 
     if(this.state.count > 5){ 
 
      throw new Error('Error error error'); 
 
     } 
 

 

 
     return (
 
      <View style={styles.main}> 
 
       <Logo/> 
 
       <SignUp/> 
 
       <Social/> 
 
      </View> 
 
     ); 
 
    } 
 
}

Answer 1

Das funktioniert nicht, weil componentDidCatch() funktioniert nur für von einem Komponenten Kinder geworfen Fehler zu kontrollieren. Hier scheint es, als ob Sie versuchen, einen Fehler zu finden, der von der gleichen Komponente ausgelöst wird - das wird nicht funktionieren.

Siehe official documentation für weitere Informationen:

Fehlergrenzen Komponenten reagieren, sind die fangen überall JavaScript-Fehler in ihrem Kind Komponentenbaum, diese Fehler protokollieren und eine Ausweich UI angezeigt anstelle der Komponente Baum, abgestürzt.

Beachten Sie die "irgendwo in ihrem Kind Komponentenbaum".

---

Alles, was Sie tun müssen, ist Ihre Komponente in eine andere Komponente zu verpacken, die alle Fehler verwaltet. Etwas wie:

<ErrorBoundary> 
    <SignUpInit /> 
</ErrorBoundary> 

Wo <ErrorBoundary /> ist etwas so einfaches wie:

class ErrorBoundary extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {hasError: false}; 
    } 

    componentDidCatch(error, info) { 
    this.setState({hasError: true}); 
    } 

    render() { 
    if(this.state.hasError) return <div>Error!</div>; 
    return this.props.children; 
    } 
} 

Answer 2

Try this example in expo

Denken Sie auch daran, dass Fehler gefangen sind in machen, sind aber nicht in Event-Handler gefangen.

prüft diese issue