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函数上下文。干杯者,我的朋友,祝你快乐!非常感谢!太好了,非常感谢!非常有用