So verwenden Sie reagieren setState mit Chrom-API

Question

Ichs setState mit Chrom-API verwenden möchten, reagieren, aber ich bin in ein Problem laufen ...

componentDidMount() { 

    chrome.runtime.onMessage.addListener(function(request, sender) { 
     if (request.action == "getSource") { 
      this.setState({sourceCode: request.source}); 
     } 
    }); 
} 

habe ich versucht, die folgenden aber Chrom-API nicht erkennt setState als eine Funktion, so ist, dann habe ich versucht, erste request.source als Variable zu speichern ...

componentDidMount() { 
    var source = ""; 
    chrome.runtime.onMessage.addListener(function(request, sender) { 
     if (request.action == "getSource") { 
      source = request.source; 
     } 
    }); 
    this.setState({sourceCode: source}); 
} 

Aber wenn ich die folgende versuchen, source bleibt ein leerer String. Ich kann nicht herausfinden, warum seit source auf request.source gesetzt wird. Wie kann ich das beheben?

EDIT

ich als so ein Skript nenne ...

chrome.tabs.executeScript(null, { 
     file: 'src/js/scripts/getPageSource.js' 
    }, function() { 
    ... 

und im Script Ich habe einfach die folgende ...

chrome.runtime.sendMessage({ 
    action: "getSource", 
    source: DOMtoString(document) 
}); 

Wo DOMtoString Funktion Gibt eine Zeichenfolge zurück. Es ist die von meiner componentDidMount gefangen, die ich durch den Ausdruck auf der Konsole innerhalb der if-Anweisung verifiziert habe.

Es ist mir aufgefallen, dass die addListener asynchron ist. Gibt es eine Möglichkeit, das Ergebnis im Staat zu speichern?

Answer 1

Sie müssen this binden, so ist es unverändert in dem Ereignis-Listener

chrome.runtime.onMessage.addListener(function(request, sender) { 
    if (request.action == "getSource") { 
     this.setState({sourceCode: request.source}); 
    } 
}.bind(this)); 

Ihr zweiter Versuch nicht funktioniert, weil der Rückruf asynchron ist. Sie müssen setState aufrufen, wenn der Rückruf zurückkehrt. Bei Ihrem zweiten Versuch registrieren Sie sich für den Listener aber dann sofort Aufruf setState.

Bearbeiten: Alternativ können Sie stattdessen zu arrow functions verwenden. Dies würde lexikalisch binden this so wäre es unverändert.