如何使用带有 chrome API 的 react setState

Question

我想将 react 的 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 函数只返回一个字符串。这是我的componentDidMount 捕获的，我已通过在 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。

编辑： 或者，您可以改用arrow functions。这将在词法上绑定this，因此它不会改变。

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