Question

我正在尝试将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)
  });

正确理解this。（大致！）等效于以下内容：

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

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

2 个答案: