react在promise中丢失了“this”上下文[重复]

Question

我对 react 很陌生，可能犯了一个愚蠢的错误。我正在尝试使用返回承诺的 axios 进行 api 调用。当这个承诺解决时，我想将它的结果传递给一个函数，该函数通过回调更新父级的状态。但是，当我不确定时，“这个”似乎消失了。我想随着它在未来的解决，不再有“这个”上下文？我可以通过将回调分配给临时并使用它来解决它，但感觉很笨拙。代码如下：

axios.get(url)
  .then(function(response) {
    this.props.handler(response.data.thing)
  })
  .catch(function(error) {
    console.log(error)
  })

这行得通：

let handler = this.props.handler
axios.get(url)
  .then(function(response) {
    handler(response.data.word)
  })
  .catch(function(error) {
    console.log(error)
  })

Answer 1

这是箭头函数的用武之地。箭头函数基本上从上面维护this，并且不会在函数内覆盖它。您可以在MDN 上阅读更多信息。请记住，这是一项较新的功能，因此某些较旧的浏览器将不支持它。

以下代码是根据您问题中的代码使用箭头函数的示例。

axios.get(url)
  .then((response) => {
    this.props.handler(response.data.thing)
  })
  .catch((error) => {
    console.log(error)
  })

编辑：

不使用 ES6 语法的另一种方法是在函数外部设置一个变量。即使不支持箭头功能，您在问题中提供的另一个示例也将起作用。但是你也可以使用下面的代码。

var self = this;
axios.get(url)
  .then(function (response) {
    self.props.handler(response.data.thing)
  })
  .catch(function (error) {
    console.log(error)
  })

这将允许您使用创建的变量 (self) 访问正确的 this。当然，如前所述，这样做的缺点是它稍微笨重，不如使用箭头函数那么干净。

有关浏览器与箭头函数兼容性的更多信息，您可以查看Can I use。虽然如果你使用 React，你很有可能会使用 Babel 作为编译器，它应该负责转换 ES6 语法并使其更兼容浏览器。