Question

在计算的属性中，我试图将从API接收到的ID与也从API接收到的具有ID密钥的对象数组进行匹配，并从匹配的ID对象中检索名称密钥。

obj变量有时会引发“ obj is undefined”错误，但不一致。

我认为与ID有关的是异步的。将功能从箭头更改为经典功能，以免与该范围发生冲突。

  data() {
    return {
      upComing: [],
      popular: [],
      topRated: [],
      playingNow: [],
      details: [],
      genres: []
    }
  },

  computed: {
    genre: function() {
      let list = this.upComing[0] ? this.upComing[0].genre_ids[0] : 0
      let obj = this.genres.find(function(o) {
        return o.id === list
      })
      return obj.name
    }
  },

  created() {
    let self = this
    APIService.getUpcoming()
      .then(response => {
        self.upComing = response.data.results
        //console.log(this.upComing)
      })
      .catch(error => {
        console.log(`There was an error: ${error.response}`)
      }),
      APIService.getGenres()
        .then(response => {
          this.genres = response.data.genres
          //console.log(this.genres)
        })
        .catch(error => {
          console.log(`There was an error: ${error.response}`)
        })
  }
}

我得到了这个TypeError: "obj is undefined"和这个[Vue warn]: Error in render: "TypeError: obj is undefined"

并将它们分别抛出两次。因此，我在控制台中有4个错误，但只是这2次错误，延迟了1秒。

Answer 1

错误是this.genres是[]，因此在安装组件时会计算出计算出的属性，因此this.genres.find(....的结果是不确定的（因为找不到内容）在一个空列表中。

您可以使用||表示法来获得默认值，如下所示：

let obj = this.genres.find(function(o) {
        return o.id === list
      }) || { name: 'defaultName'}

这意味着，如果在流派列表中未找到任何内容，则您仍具有默认结果，则可以返回obj.name而不会出现错误。

还要注意，genres变量为空，因为计算的方法在您的诺言得到解决之前是tun，并且在更新该变量后再次运行

Answer 2

您最有可能认为问题是异步问题，您是否不能通过执行以下操作来防范undefined：

  computed: {
    genre: function() {
      let list = this.upComing[0] ? this.upComing[0].genre_ids[0] : 0
      let obj = this.genres.find(function(o) {
        return o.id === list
      })
      return obj ? obj.name : '' // or whatever should be the default
    }
  },

obj有时是未定义的，而在其他时候则可以正常使用

2 个答案: