存储local后 数据与渲染页面的数据不符为什么 怎么办

所以渲染部分代码有错 没有联系local里的数据渲染

我是直接拿到json数据 及 local id 里的num 直接渲染到html

正确是： 拿到json数据 遍历它 拿到json的id 将这个json  id 看是否在local中

如果没在就返回false 用外在变量接收它 filter返回一个符合条件的数组

就是json  id 在 local id 中有的去渲染

如果不判断直接渲染 就是整个json 无论怎么增删改查 刷新后渲染的都是整个json数据

所以要与local中id匹配 存在的拿出来渲染

所以又设置了另一个函数 传值 filter新返回的数组 遍历它 还有local中的cart 为参数

这样遍历渲染它  cart是为了 item.id 作为cart的id 可以拿到cart的num 用在数量中

async getnum(){
     // 拿到localstage的数据 请求数据
   let cartgoods = localStorage.getItem('cart')
       // 没有数据则停止
   if (!cartgoods) return;
   //转化为数组
   cartgoods = JSON.parse(cartgoods)
   //请求数据
   let date = await axios.get({url:'./js/goods.json',data:'',dataType :''})
   date = JSON.parse(date)
   console.log(date)
   //循环商品的信息 根据id获取购物车中的值，有值说明商品在
   let existsCartGoods = date.filter(item => {
      console.log(item.id);
      // console.log(cartgoods[item.id]);
      // 结果为数字 转化为 true  undefined 转化为false
      return cartgoods[item.id];
   })
   this.showpage( existsCartGoods,cartgoods)
   }

   showpage(date,ct){
   // let arr = JSON.parse(date)
   //  console.log(arr)
    let html =''
    //遍历它
    date.forEach(ele => {
      html += `<tr goods-id="${ele.id}">
      <td class="checkbox"><input class="check-one check" type="checkbox"></td>
      <td class="goods"><img src="${ele.src}" alt=""><span>${ele.name}</span></td>
      <td class="price">${ele.price}</td>
      <td class="count">
          <span class="reduce">-</span>
          <input class="count-input" type="text" value="${ct[ele.id]}">
          <span class="add">+</span></td>
      <td class="subtotal">${ele.price*ct[ele.id]}</td>
      <td class="operation"><span class="delete">删除</span></td>
  </tr>`
    });
    //追加到页面上 拿到tbody
    _$('#cartTable tbody').innerHTML = html;
   }