如何将react setState与chrome API一起使用

Question

我想使用的setState与chrome API，但我遇到了一个问题...

componentDidMount() {

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

我尝试了以下操作，但chrome API无法将setState识别为函数，因此我尝试先将request.source保存为变量。。。

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

但是当我尝试以下操作时，source仍然是一个空字符串。我不明白为什么，因为source被设置为request.source。我怎样才能解决这个问题？

编辑

我把剧本叫做...

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

在剧本里我有以下内容...

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

其中DOMtoString函数只返回一个字符串。它是由我的组件didmount捕获的，我通过打印到if语句内的控制台来验证它。

我注意到addListener是异步的。有什么方法可以将结果保存在状态中吗？

Answer 1

您需要绑定this，使其在事件监听器中保持不变

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

第二次尝试不起作用，因为回调是异步的。当回调返回时，您需要调用setState。在第二次尝试中，您注册了侦听器，但随后立即调用setState。

编辑：或者，您可以切换到使用箭头函数。这将在词汇上绑定This，因此它将保持不变。

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