根据特定规则生成合并数据,遍历循环时会存在数据错乱等情况的问题排查(深拷贝 仅自己记录)

问题前景

在合并生成领料单,选择相同物料,合并领料,但因批次,数量不一样,需要单独生成一个主单据下面显示具体的物料,主单据的数量必须是选择单据的数量累加
根据特定规则生成合并数据,遍历循环时会存在数据错乱等情况的问题排查(深拷贝 仅自己记录)_第1张图片
根据特定规则生成合并数据,遍历循环时会存在数据错乱等情况的问题排查(深拷贝 仅自己记录)_第2张图片

错误代码演示

 const temp = JSON.parse(JSON.stringify(this.lydata.orderProdPbmList))
    const dataList = temp
    const obj = {}
    const peon = temp.reduce((cur, next) => {
      if (obj[next.materialCode]) {
        console.log('obj[next.materialCode]', next.planQty)
      } else {
        obj[next.materialCode] = true && cur.push(next)
      }
      return cur
    }, [])
    peon.forEach(item => {
      let sum = 0
      const children = []
      dataList.forEach(e => {
        if (item.materialCode === e.materialCode) {
          sum += e.planQty - e.lockQty
          children.push(e)
        }
      })
      item.children = children
      item.totalQty = sum
    })
    this.mergeListShow = peon
  

根据特定规则生成合并数据,遍历循环时会存在数据错乱等情况的问题排查(深拷贝 仅自己记录)_第3张图片

正确代码

 const temp = JSON.parse(JSON.stringify(this.lydata.orderProdPbmList))
    const dataList = [...temp]
    const obj = {}
    const peon = temp.reduce((cur, next) => {
      if (obj[next.materialCode]) {
        console.log('obj[next.materialCode]', next.planQty)
      } else {
        obj[next.materialCode] = true && cur.push(next)
      }
      return cur
    }, [])
    peon.forEach(item => {
      let sum = 0
      const children = []
      dataList.forEach(e => {
        if (item.materialCode === e.materialCode) {
          sum += e.planQty - e.lockQty
          children.push({ ...e })
        }
      })
      item.children = children
      item.totalQty = sum
    })
    this.mergeListShow = peon

问题:引用的问题,引用了地址。数组和对象的深拷贝

根据特定规则生成合并数据,遍历循环时会存在数据错乱等情况的问题排查(深拷贝 仅自己记录)_第4张图片

children.push({ ...e })//对象深拷贝
const temp = JSON.parse(JSON.stringify(this.lydata.orderProdPbmList))
    const dataList = [...temp]//数组深拷贝

你可能感兴趣的:(js,javascript,前端)