Question

未捕获（在承诺中）TypeError：无法在 eval 中设置未定义的属性“playerName”

2019-01-04

5536

javascript vue.js vuejs2 axios

我尝试将 GET 请求中的 response.data.Response.displayName 分配给 playerName 属性，但是，我收到错误“ Uncaught (in promise) TypeError: Cannot set property 'playerName' of undefined at eval ”。我已成功将 response.data.Reponse.displayName 记录到控制台，因此其中有一个 displayName。

为什么我会收到此错误？

export default {
  data: function() {
    return {
      playerName: ''
    }
  },
  methods: {

  },
  mounted() {
    axios.get('/User/GetBungieNetUserById/19964531/')
      .then(function(response) {
          this.playerName = response.data.Response.displayName
        console.log(response.data.Response.displayName)
      });
  }
}

Answer 1

其他评论和答案是正确的 - 使用箭头/lambda 函数而不是仅使用 function 即可。但原因却有些微妙。

Javascript 的 this 概念定义明确，但并不总是您期望从其他语言中得到的。当您从诸如回调之类的子函数执行时， this 可以在一个范围块内更改。在您的情况下， then 中的函数不再将 this 理解为您直接在 mounted() 内运行相同代码时所理解的。

但是，您可以将函数绑定到（除其他目的外）附加无法更改的特定 this 。箭头函数隐式执行此操作，并将 this 绑定到创建箭头函数的上下文中的 this 。因此，此代码：

axios.get('/User/GetBungieNetUserById/19964531/')
  .then((response) => {
      this.playerName = response.data.Response.displayName
    console.log(response.data.Response.displayName)
  });

正确理解了 这个 。它（ 大致！ ）相当于以下内容：

axios.get('/User/GetBungieNetUserById/19964531/')
  .then((function(response) {
      this.playerName = response.data.Response.displayName
    console.log(response.data.Response.displayName)
  }).bind(this));

Answer 2

使用 lambda 函数（箭头函数）到达代码

export default {
  data: function() {
    return {
      playerName: ''
    }
  },
  methods: {

  },
  mounted() {
    axios.get('/User/GetBungieNetUserById/19964531/')
      .then((response) => {
          self.playerName = response.data.Response.displayName
        console.log(response.data.Response.displayName)
      });
  }
}