vue渲染报错Error in render: "TypeError: Cannot read properties of undefined (reading 'length')"

<template>
  <div class="goods-sale" v-if="postItems.length != 0">
    <div v-for="(item,i) in postItems.length" :key="i">
    <poster :postItem="postItems[i]" >poster>
    <goods-box :goodsItem="item" v-for="(item,j) in goodsItems" :key="j">goods-box> 
    div>
  div>
template>

<script>
import Poster from './Poster'
import GoodsBox from './GoodsBox'

export default {
  data () {
    return {
      postItems:[],
      goodsItems:[]
      
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init(){
      this.axios.get("/home/goods_sale").then((res) => {
        for (let index = 0; index < res.length; index++) {
          const cate = res[index];
          this.postItems.push({
            src:cate.pic,
            url:cate.url
          })

          let goods = [];
          let productList = cate.productList;
          window.console.log(productList);
          for (let j = 0; j < productList.length; j++) {
            const product = productList[j];
            window.console.log(product);
            goods.push({
              value:product.name,
              desc:product.subTitle,
              sub:true,
              newPrice:product.price,
              oldPrice:product.priceoriginalPrice?product.originalPrice:null,
              src:product.pic,
              url:'/#/detail/'+product.id,
            })
          }
          this.goodsItems.push({
            boxTitle:cate.categoryName,
            url:'/#/searchResult/'+cate.categoryName,
            listData:{
                  goods:goods
                }          
          })
        }
      });
    }
  },
  components: {
    'Poster': Poster,
    'GoodsBox': GoodsBox
  }
}
script>

<style lang="less">
  .goods-sale {
      position: relative;
      
    text-align: center;
      width: 1226px;
      height: auto;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
  }
  .goods-sale *{    box-sizing: border-box;}
style>

能正常拿到goodsitems的数据，但是渲染不上去，报错

总共报了四次这个错误，不知道怎么解决，也试过

<template>
  <div class="goods-sale">
    <div  v-for="(item,i) in postItems.length" :key="i">
      <poster :postItem="postItems[i]">poster>
      <goods-box :goodsItem="goodsItems[i]" >goods-box>  
    div>
  div>
template>

依然报错，一样的错误

v-for里面循环的应该是postItems,而不是postItems.length：

<template>
  <div class="goods-sale" v-if="postItems.length != 0">
    <div v-for="(item,i) in postItems" :key="i">
    <poster :postItem="postItems[i]" ></poster>
    <goods-box :goodsItem="item" v-for="(item,j) in goodsItems" :key="j"></goods-box> 
    </div>
  </div>
</template>

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7658261
• 你也可以参考下这篇文章：vue错误:Error in render: “TypeError: Cannot read property ‘XXX‘ of undefined“

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^