如何在chrome extension + reactjs中的chrome.storage.sync.get回调之后调用内部函数？

Question

我使用reactjs进行chrome扩展。

我的组件有一些内部函数，我在回调chrome.storage.sync.get后调用它们。

但我得到了＆＃34; XXX不是功能＆＃34;错误。

这是我的代码段。

class App extends React.Component {
  func1(){}
  func2() {
    chrome.storage.sync.get(null, function(data) {
      this.func1();
      this.setState(...);
    })
  }

}

我无法调用func1。

Answer 1

您需要在回调中保留应用的上下文。

class App extends React.Component {
  func1(){}
  func2() {
    chrome.storage.sync.get(null, (data) => {
      this.func1();
      this.setState(...);
    })
  }
}

请注意，我将您的回调更改为arrow function，它不绑定自己的this值，而是使用与调用函数相同的上下文 - 在本例中为您的应用。