Kann nicht anrufen, setState auf einer nicht gemounteten Komponente

Erhalte immer folgende Fehlermeldung Reagieren Nativen, wirklich nicht verstehen, wo es herkommt

Warnung: Kann nicht anrufen setState (oder forceUpdate) auf einer nicht gemounteten
Komponente. Dies ist ein no-op, aber es gibt ein memory leak in your
- Anwendung. Zu beheben, kündigen Sie alle Abonnements und asynchrone tasks
in der componentWillUnmount Methode.

Habe ich die folgende einfache Komponente:

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            isLoggedIn: false,
        } 
    }

    componentDidMount(){
        this.fetchToken()
      }

    async fetchToken(){
        const access_token = await AsyncStorage.getItem('access_token')
        if (access_token !== null) {
           this.setState({ isLoggedIn: true })
        }
    }

    render() {
        const login = this.state.isLoggedIn
        if (login) {
            return <NavigatorLoggedIn />
        } else { 
            return <Navigator/>
        }
    }

}

Sie sollen zur Initialisierung der Staat innerhalb der Konstruktor, der nicht außerhalb. Und verwenden this.state, nicht nur state. Ich würde auch nicht gelten, die async Attribut zu Reagieren, die Standard-lifecycle-Methoden, am besten lassen, wie Sie sind. Erstellen Sie eine separate async/await Komponente Funktion um dies zu tun, dann rufen Sie es in componentDidMount
Danke für die Antwort! Aktualisiert die Komponente mit Ihren Anregungen. Original-Warnung ist immer noch da ;(
componentDidMount() läuft nach dem Rendern so aktualisierten Zustand nicht sichtbar/verfügbar in render(). Dann nehme ich diese Komponente wird ausgehängt, über render() in jedem Fall und so ruft fetchToken() nach der Tat verursacht einen Speicherverlust, pro den Fehler messgage.
dachte so an! irgendwelche Vorschläge für eine Lösung? Versucht eine Lösung zu finden, mich zu
aus der hand: (1) tun Sie es in render() an der Spitze. (2) im Konstruktor. In beiden Fällen verwenden Sie die andere form setState(), die es braucht, Funktion; weil setState() ist grundsätzlich asynchron
Möglich, Duplikat der Reagieren Warnung über setState im unmontierten Komponente

InformationsquelleAutor Marlow | 2018-06-09

react-native reactjs

1

Können Sie es verwenden:
```
componentDidMount() {
    this.function()
}

function = async () => { 
    const access_token = await AsyncStorage.getItem('access_token')
    if (access_token !== null) {
        this.setState({ isLoggedIn: true })
    }
}
```
Oder rufen Sie function im constructor.

Ich hoffe, dies wird Ihnen helfen,...
- Danke für die schnelle Antwort! Es versucht aber immer die gleiche Warnung in der ursprünglichen Frage
- Als Hinweis, nicht nennen async/await-Funktionen im Konstruktor. Der Konstruktor initialisieren der Komponente und schicken Sie es so bald wie möglich. Wenn Sie brauchen, um warten auf eine async-Funktion, rufen Sie es in componentDidMount.
InformationsquelleAutor Ali Sn

Es werden arbeiten:

let self;

class App extends React.Component {
    constructor(props) {
        super(props)
        self = this;
        this.state = {
            isLoggedIn: false,
        } 
    }

    componentDidMount(){
        this.fetchToken()
      }

    async fetchToken(){
        const access_token = await AsyncStorage.getItem('access_token')
        if (access_token !== null) {
           self.setState({ isLoggedIn: true })
        }
    }

    render() {
        const login = self.state.isLoggedIn
        if (login) {
            return <NavigatorLoggedIn />
        } else { 
            return <Navigator/>
        }
    }

}

InformationsquelleAutor Hoàng Vũ Anh

0

müssen Sie verwenden isMounted variable.
```
componentDidMount(){
  this.setState({ isMounted = true });
  const access_token = await AsyncStorage.getItem('access_token')
  if (access_token !== null && this.isMounted) {
     this.setState({ isLoggedIn: true })
  }
}

componentWillUnmount(){
   this.setState({ isMounted = false });
}
```
Oder verwenden Sie den Axios, können Sie mit cancel request-Funktion des axios
diese hier: https://github.com/axios/axios#cancellation
- Danke für die schnelle Antwort! Probiert es aus, aber der setState-von isLoggedIn funktioniert nicht auf diese Weise
- Ich verstehe es nicht. Wenn-Komponente ist noch montiert, setState wird normal arbeiten.
- die if-Anweisung nicht ausgeführt wird, die && this.isMounted funktioniert nicht
- Hast du versucht, das Versprechen oder die callback-anstelle von async/await.
- RN docs zu sagen, nicht setState auf unmountet: reactjs.org/docs/react-component.html#componentwillunmount
InformationsquelleAutor san
0

Für mich, ich habe es behoben, indem Sie den server neu starten, indem Sie "Garn start" oder "npm start"

InformationsquelleAutor Weijing Jay Lin

Können Sie versuchen, diese:

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            isLoggedIn: false,
        } 
    }

    _isMounted = false;   

    componentDidMount(){
        this._isMounted = true; 
        this.fetchToken()
      }

    async fetchToken(){
        const access_token = await AsyncStorage.getItem('access_token')
        if (access_token !== null && this._isMounted) {
           this.setState({ isLoggedIn: true })
        }
    }

    componentWillUnmount() {
        this._isMounted = false;
    } 

    render() {
        const login = this.state.isLoggedIn
        if (login) {
            return <NavigatorLoggedIn />
        } else { 
            return <Navigator/>
        }
    }

}

Mithilfe _isMounted, setState wird nur aufgerufen, wenn die Komponente montiert ist, Die das unmounten nicht warten, bis der async-Aufruf fertig. Schließlich, wenn der async-Aufruf wird über die Komponente bereits ausgehängt, und so ist es nicht der Zustand. Um dies zu tun, ist die Antwort einfach eine überprüfung, um zu sehen, wenn die Komponente montiert ist, bevor Sie den Staat.

InformationsquelleAutor

0

Abbrechen alle asynchronen operation ist eine der Lösung

InformationsquelleAutor Shawn Wang

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.