[英]How to use react setState with chrome API
我想使用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
是异步的。 有什么方法可以将结果保存在州内吗?
您需要绑定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});
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.