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

Posted 2023-02-22

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

【英文标题】：react loses 'this' context inside promise [duplicate]

【发布时间】：2018-06-02 18:12:50

【问题描述】：

我对 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)
  )

【参考方案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 语法并使其更兼容浏览器。

【讨论】：

是的！谢谢。忘记了他们的一切。也是 es6 的新手。

@user1584120 没问题！如果您认为这有助于您考虑接受答案。很高兴它对您有所帮助！

我会的，你肯定回答得很快，因为它不会让我再接受 3 分钟

@user1584120 哈哈太棒了。很高兴它有帮助！快乐编码！