为啥“渲染中的错误：TypeError：无法读取未定义的属性'过滤器'”返回甚至已经可用的数据？

Posted 2023-02-22

【中文标题】为啥“渲染中的错误：TypeError：无法读取未定义的属性\'过滤器\'”返回甚至已经可用的数据？

【英文标题】：Why "Error in render: TypeError: Cannot read property 'filter' of undefined" returned even data already available?为什么“渲染中的错误：TypeError：无法读取未定义的属性'过滤器'”返回甚至已经可用的数据？

【发布时间】：2018-09-14 18:07:37

【问题描述】：

我已经初始化了数据。

data () 
  return 
    current_product: ,
    current_ID: '',
  

然后，我在生命周期 created 挂钩上从 REST API 获取数据。

created () 
  var skuID = this.$store.state.selected_productSKU.productSKU_ID

  axios.get(`http://localhost:8081/api/products/$skuID`)
    .then(response => 
      this.current_ID = response.data.product_ID
      this.current_product = response.data
    )
    .catch(e => 
      alert(e)
  )

最后，我使用计算属性来获取一些值

// THIS JUST RETURN ['XL', 'M']
focusedProduct_SKUS_NoDupSizes () 
  var newArr = this.current_product.product_SKU.filter((sku, index, self) =>
    index === self.findIndex(t => (
      t.productSKU_size === sku.productSKU_size
    ))
  )
  var x = newArr.map(a => a.productSKU_size)
  return x

vue 实例显示预期结果

但是如果我在模板中调用 focusedProduct_SKUS_NoDupSizes 。

它不渲染。 浏览器返回错误Error in render: "TypeError: Cannot read property 'filter' of undefined"

发生了什么？我的第一个猜测是computed property 使用current_product 的初始结构 empty object。但这不就是如何初始化一个对象吗？

【参考方案1】：

因为：

computed:
  // ...
  focusedProduct_SKUS_NoDupSizes () 
    var newArr = this.current_product.product_SKU.filter((sku, index, self) =>
                                      ^^^^^^^^^^^

你应该用一个空数组初始化product_SKU：

data () 
  return 
    current_product: product_SKU: [], // changed here
    current_ID: '',
  

这是必需的，因为计算属性将立即执行，甚至在您的 Ajax 有机会返回之前。

将其声明为空，以便计算不会引发错误。当 Ajax 完成时，它会自动重新计算。

即使 Ajax 在created() 处启动，它也不会在第一次执行计算之前返回。 More details about this here.

【讨论】：

谢谢。我现在知道了。 :) 编辑：它也可以工作