javascript - obj 有时未定义，有时工作正常

Question

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

obj 变量偶尔会抛出“obj 未定义”错误，但并非始终如此。

我认为这与 ID 异步有关。将函数从箭头更改为经典函数，以免扰乱 this 范围。

  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 变量为空，因为计算方法在您的 Promise 解决之前为 tun，并且在您更新该变量后再次运行