Javascript JS React:this.x的错误不是一个函数,即使绑定了这个.x函数
我正在尝试更新,以便在安装应用程序组件时更新Javascript JS React:this.x的错误不是一个函数,即使绑定了这个.x函数,javascript,reactjs,Javascript,Reactjs,我正在尝试更新,以便在安装应用程序组件时更新窗口的状态。使用下面的代码,我收到一个响应tabs的错误。query:TypeError:this.addTabs不是函数 我不明白为什么this.addTabs不被视为一个函数,因为该函数高于对this.addTabs(tabs)的引用,我认为它是正确绑定的 class App extends Component { constructor(props){ super(props); this.state = { window:
窗口的状态。使用下面的代码,我收到一个响应tabs的错误。query:TypeError:this.addTabs不是函数
我不明白为什么this.addTabs不被视为一个函数,因为该函数高于对this.addTabs(tabs)的引用,我认为它是正确绑定的
class App extends Component {
constructor(props){
super(props);
this.state = {
window: []
};
this.addTabs = this.addTabs.bind(this);
}
addTabs(tabs){
this.setState({window:this.state.window.concat(tabs)});
};
componentDidMount(){
chrome.tabs.query({active:true},function(tabs){
this.addTabs(tabs);
});
我不想使用箭头功能。我看了类似的问题,回答是在构造函数中绑定函数,我相信我做到了。任何帮助或指点都将不胜感激 您的问题在这个区块中:
componentDidMount(){
chrome.tabs.query({active:true},function(tabs){
this.addTabs(tabs);
});
}
在回调中,上下文不同,因此此
引用另一个上下文
你有几种方法来修复它
1) 在回调外部将ref分配给此,并使用该ref:
componentDidMount(){
const that = this;
chrome.tabs.query({active:true},function(tabs){
that.addTabs(tabs);
});
}
2) 将当前文件绑定到此回调:
componentDidMount(){
chrome.tabs.query({active:true},(function(tabs){
this.addTabs(tabs);
}).bind(this));
}
3) 使用箭头功能:
componentDidMount(){
chrome.tabs.query({active:true}, (tabs) => {
this.addTabs(tabs);
});
}
您的问题在此区块中:
componentDidMount(){
chrome.tabs.query({active:true},function(tabs){
this.addTabs(tabs);
});
}
在回调中,上下文不同,因此此
引用另一个上下文
你有几种方法来修复它
1) 在回调外部将ref分配给此,并使用该ref:
componentDidMount(){
const that = this;
chrome.tabs.query({active:true},function(tabs){
that.addTabs(tabs);
});
}
2) 将当前文件绑定到此回调:
componentDidMount(){
chrome.tabs.query({active:true},(function(tabs){
this.addTabs(tabs);
}).bind(this));
}
3) 使用箭头功能:
componentDidMount(){
chrome.tabs.query({active:true}, (tabs) => {
this.addTabs(tabs);
});
}
如果您不使用arrow函数,那么当您使用“this.addTabs(tabs)”时,您实际上是在引用函数上下文,另一种方法是您可以在componentDidMount中定义“\u this=this”,并使用“this.addTabstanks@AaminKhan”,这就解决了问题。我可能应该仔细阅读JS函数上下文。干杯者,我的朋友,祝你快乐!如果您不使用arrow函数,那么当您使用“this.addTabs(tabs)”时,您实际上是在引用函数上下文,另一种方法是您可以在componentDidMount中定义“\u this=this”,并使用“this.addTabstanks@AaminKhan”,这就解决了问题。我可能应该仔细阅读JS函数上下文。干杯者,我的朋友,祝你快乐!非常感谢!太好了,非常感谢!非常有用