Zugriff auf this.setstate in onShouldStartLoadWithRequest() eines WebView in React Native?

Question

Ich habe wirklich Mühe zu verstehen, wie man this.state innerhalb von Funktionen liest und setzt, die von WebView aufgerufen werden, wenn bestimmte Operationen ausgeführt werden. Mein Endziel ist:

• einen Aktivitätsindikatoren anzeigen, wenn der Benutzer auf einen Link in der Webansicht klickt
• bestimmte Aktionen basierend auf der URL Führen der Benutzer auf

Ich bin klickt sehr Neu zu Reagieren, aber von dem, was ich gelernt habe, sollte ich () => function verwenden, um this von dem Hauptobjekt zu binden, um innerhalb der Funktion zugänglich zu sein.

Dies funktioniert auf onLoad={(e) => this._loading('onLoad Complete')} und ich kann den Zustand aktualisieren, wenn die Seite das erste Mal geladen wird.

Wenn ich onShouldStartLoadWithRequest={this._onShouldStartLoadWithRequest}10 verwende kann ich sehen, dass es funktioniert und mein console.warn() wird auf dem Bildschirm angezeigt. this.state ist natürlich nicht verfügbar.

Wenn ich es jedoch in onShouldStartLoadWithRequest={() => this._onShouldStartLoadWithRequest} ändern, scheint die Funktion überhaupt nicht ausgeführt zu werden, und weder this.state (im folgenden Code kommentiert) noch console.warn() wird ausgeführt.

Jede Hilfe wird geschätzt!

import React, { Component} from 'react'; 
import {Text,View,WebView} from 'react-native'; 

class Question extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      isLoading: false, 
      debug: 'Debug header' 
     }; 
    } 

    render() { 
     return (
      <View style={{flex:1, marginTop:20}}> 
       <Text style={{backgroundColor: '#f9f', padding: 5}}>{this.state.debug}</Text> 
       <WebView 
        source={{uri: 'http://stackoverflow.com/'}} 
        renderLoading={this._renderLoading} 
        startInLoadingState={true} 
        javaScriptEnabled={true} 
        onShouldStartLoadWithRequest={this._onShouldStartLoadWithRequest} 
        onNavigationStateChange = {this._onShouldStartLoadWithRequest} 
        onLoad={(e) => this._loading('onLoad Complete')} 
       /> 
      </View> 
     ); 
    } 

    _loading(text) { 
     this.setState({debug: text}); 
    } 

    _renderLoading() { 
     return (
      <Text style={{backgroundColor: '#ff0', padding: 5}}>_renderLoading</Text> 
     ) 
    } 

    _onShouldStartLoadWithRequest(e) { 
     // If I call this with this._onShouldStartLoadWithRequest in the WebView props, I get "this.setState is not a function" 
     // But if I call it with() => this._onShouldStartLoadWithRequest it's not executed at all, 
     // and console.warn() isn't run 
     //this.setState({debug: e.url}); 
     console.warn(e.url); 
     return true; 
    } 

} 



module.exports = Question; 

Answer 1

Um diesen (Klassenkontext) richtig zugreifen innen _onShouldStartLoadWithRequest, müssen Sie bind es mit Klassenkontext, nach der Bindung, wenn diese Methode this Stichwort genannt wird erhalten im Inneren Klasse reagieren darauf.

So:

onShouldStartLoadWithRequest={this._onShouldStartLoadWithRequest.bind(this)} 

oder arrow function wie folgt verwenden:

onShouldStartLoadWithRequest={this._onShouldStartLoadWithRequest} 

_onShouldStartLoadWithRequest = (e) => {...} 

Oder wie folgt aus:

onShouldStartLoadWithRequest={(e) => this._onShouldStartLoadWithRequest(e)} 

prüfen diese Antwort für weitere Informationen: Why is JavaScript bind() necessary?