Question

我很反应并且可能犯了一个愚蠢的错误。我正在尝试使用能够返回承诺的axios进行api调用。当这个promise解析时，我想将结果传递给一个通过回调更新父级状态的函数。然而，似乎这个＆＃39;因为我未定义而消失了。我想，随着它在未来的解决，不再有这个＆＃39;这个＆＃39;背景？我可以通过将回调分配给temp并使用它来绕过它，但它感觉很笨拙。这是代码：

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

这是箭头函数的用武之地.Arrow函数基本上从上面保持T并且不在函数内覆盖它。您可以在MDN上阅读更多内容。请记住，这是一个较新的功能，因此一些旧的浏览器不支持它。

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

this

修改

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

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

这将允许您使用创建的变量（var self = this; axios.get(url) .then(function (response) { self.props.handler(response.data.thing) }) .catch(function (error) { console.log(error) })）访问正确的this。当然，如上所述，它的缺点是它略显笨重，并不像使用箭头功能那样干净。

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

反应失去了这个＆＃39;承诺内容

1 个答案: