ComponentDidCatch funktioniert nicht

Warum componentDidCatch funktioniert nicht in meinem reagieren native app.
componentDidCatch nicht der Fehler behandelt.

React native v: 50.3
React: 16.0.0

JS:

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>
        );
    }
}

Sie gehen zu müssen, bieten mehr Details, als, dass, wenn Sie wollen, anderen Menschen zu helfen. Poste den code hier, mit einem reproduzierbaren Beispiel, wenn möglich
Sie gehen zu müssen, um mehr detail. Was nicht funktioniert? Was erwartest du, was passiert? Kannst du uns den relevanten code oder ein Beispiel?
Sie gehen zu müssen, um mehr detail. Posten Sie Ihre Komponente, was genau nicht funktioniert? Wie wollen Sie sagen?

InformationsquelleAutor Dmitry Kotelewsky | 2017-11-10

14

Diese funktioniert nicht, da componentDidCatch() funktioniert nur für den Fang Fehler, die ausgelöst werden durch ein Komponenten-Kinder. Hier scheint es, wie Sie versuchen, zu fangen einen Fehler, ausgelöst durch die gleiche Komponente, die nicht zur Arbeit gehen.

Sehen die offizielle Dokumentation für mehr info:

Fehler Grenzen sind, Reagieren die Komponenten, die fangen JavaScript-Fehler irgendwo in Ihrem Kind Komponente Baum, protokollieren diese Fehler, und zeigen Sie eine fallback-UI anstelle der Komponente Baum abgestürzt.

Hinweis: die "überall in Ihrem Kind Komponente Baum".

So alle Sie tun müssen ist, wickeln Sie die Komponente in einer anderen Komponente, die verwaltet alle Fehler geworfen. So 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;
  }
}
```
InformationsquelleAutor Chris
3

Versuchen Sie, dieses Beispiel in expo

Denken Sie auch daran, dass die Fehler fing an zu Rendern, aber nicht gefangen in event-Handlern.

Überprüfen Sie diese Problem

InformationsquelleAutor gusgard

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.