React在Promise中丢失了'this'上下文

Question

React在Promise中丢失了'this'上下文

javascriptreactjsecmascript-6es6-promiseaxios

6

我对React还比较新，可能会犯一些愚蠢的错误。我正在尝试使用axios进行API调用，返回一个Promise。当这个Promise被解析后，我想将其结果传递给一个函数，通过回调在父组件上更新状态。然而，似乎'this'已经消失了，因为我得到了undefined。我猜测，由于它在未来被解决，所以不再有'this'上下文？我可以通过将回调分配给一个临时变量并使用它来解决这个问题，但感觉很笨拙。以下是代码：

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

- user1584120

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Charlie Fish · Accepted Answer

箭头函数就是在这里派上用场。箭头函数基本上从上面维护了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语法并使其更加兼容浏览器。