Question

无论何时安装App组件，我都试图进行更新以更新window状态。使用以下代码，我收到一个Error in response to tabs.query: TypeError: this.addTabs is not a function。

我不明白为什么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);
});

我不想使用箭头功能。我看了类似的问题，我的回答是将函数绑定到构造函数中，我相信我做到了。任何帮助或指示，将不胜感激！

Answer 1

您的问题在此阻止中：

componentDidMount(){
  chrome.tabs.query({active:true},function(tabs){
    this.addTabs(tabs);
  });
}

在回调中，上下文不同，因此this引用了另一个上下文。

您有几种方法可以修复它。

1）在回调之外将此引用分配给该引用，并使用该引用：

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);
  });
}

JS React：即使绑定了this.x函数，this.x的错误也不是函数

1 个答案: