Vue软刷新报TypeError: Cannot read properties of undefined (reading 'products')求助

错误原因 #

• 初始值类型不匹配：products初始值设为空数组[]，但接口返回后你将完整response对象赋值给products，后续链式访问this.products.data时，初始状态下数组没有data属性，直接返回undefined，继续访问下一层就触发报错。
• 计算属性无防御性判断：直接链式访问this.products.data.products.product，任意一层属性不存在就会抛出错误，组件初始化时异步请求还未返回，必然会触发该问题。
• 异步请求无顺序保证：两个axios请求并行发送，无法保证products接口先返回结果，不符合你先获取products数据再过滤的需求。

修复后代码 #

<script>
export default {
  data() {
    return {
      popular_products: [],
      // 初始值改为null，方便后续判断是否加载完成
      products: null,
    }
  },
  computed: {
    bestsellers() {
      // 提前判断数据是否加载完成，未完成直接返回空数组
      // 若运行环境不支持可选链语法，可替换为多层&&判断：!this.products || !this.products.data || !this.products.data.products || !this.products.data.products.product
      if (!this.products?.data?.products?.product || !this.popular_products.length) {
        return []
      }
      const productList = this.products.data.products.product
      const pIdSet = new Set(this.popular_products.map(item => item.ProductNumber))
      // 优化过滤逻辑，减少循环次数
      return productList.filter(product => pIdSet.has(product.pId))
    },
  },
  async mounted() {
    // 控制请求顺序，先获取products数据，再获取popular_products数据
    try {
      const productsRes = await axios.get('https://myurl/products.json')
      this.products = productsRes
      const popularRes = await axios.get('https://myurl/admin/api/collections/get/popularproducts?token=account-9306f9192049d3c442e565f2de5372')
      this.popular_products = popularRes.data.entries
    } catch (err) {
      // 可自行添加请求失败的处理逻辑
      console.error('数据请求失败', err)
    }
  },
}
</script>

优化说明 #

• 新增防御性判断：提前校验每一层属性的存在性，避免属性不存在时的报错。
• 过滤逻辑优化：将popular_products的商品ID转为Set，单次循环即可完成过滤，比嵌套循环的时间复杂度更低。
• 异步顺序控制：用async/await控制请求顺序，保证先拿到products数据再处理后续逻辑，同时添加try/catch捕获请求异常。

内容的提问来源于stack exchange，提问作者jord49