我想在Chrome API中使用react的setState,但是遇到了问题…

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仍然是一个空字符串.我不知道为什么,因为将源设置为request.source.我怎样才能解决这个问题？

编辑

我这样叫剧本…

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

在脚本中,我有以下内容…

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

DOMtoString函数仅返回一个字符串.它是由我的componentDidMount捕获的,我已经通过在if语句内打印到控制台进行了验证.

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

解决方法:

您需要绑定它,因此它在事件监听器中保持不变

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

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

编辑：
或者,您可以改为使用arrow functions.这将在词汇上绑定它,因此它将保持不变.

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