React POS开发：useState实现多发票功能时数量修改跨单同步问题求助

问题根因 #

• 直接复用了ItemDetails对象的引用：JS中对象是引用类型，你把同一个商品对象直接存入多个发票的明细数组时，所有数组保存的都是指向同一块内存的引用，修改任意一个副本的Qty属性，所有引用的地方都会同步变化。
• 发票明细、激活发票编号都用普通变量声明，没有存入React状态，组件重渲染时这些变量会被重置为初始值，数据无法持久化。
• 手动操作DOM修改激活样式不符合React的声明式写法，容易出现状态和视图不一致的问题。

修复方案 #

第一步：调整状态定义，把所有需要持久化的数据都存入React状态 #

// 用一个对象统一管理3张发票的明细，减少冗余代码
const [invoiceDetails, setInvoiceDetails] = useState({
  1: [],
  2: [],
  3: []
})
// 激活的发票编号存入状态
const [activeInvoice, setActiveInvoice] = useState(1)
// 当前展示的订单明细直接从状态派生，不需要单独存orderlines状态
const currentOrderLines = invoiceDetails[activeInvoice]

第二步：重写切换发票的逻辑，用状态控制激活样式，不再手动操作DOM #

function setInvoice(number) {
  setActiveInvoice(number)
}
// 渲染Tab的时候直接用activeInvoice判断是否加active类即可，示例：
// <div className={activeInvoice === 1 ? 'active' : ''} onClick={() => setInvoice(1)}>发票1</div>
// <div className={activeInvoice === 2 ? 'active' : ''} onClick={() => setInvoice(2)}>发票2</div>
// <div className={activeInvoice === 3 ? 'active' : ''} onClick={() => setInvoice(3)}>发票3</div>

第三步：重写addOrder逻辑，每次添加商品都创建新的对象副本，避免引用共享 #

function addOrder(ItemDetails) {
  setInvoiceDetails(prev => {
    const currentInvoice = [...prev[activeInvoice]]
    const itemIndex = currentInvoice.findIndex(item => item.ItemNumber === ItemDetails.ItemNumber)
    if (itemIndex === -1) {
      // 创建全新的商品对象，不修改原传入的ItemDetails引用
      const newItem = {...ItemDetails, Qty: 1}
      currentInvoice.unshift(newItem)
    } else {
      // 修改的时候也创建新的对象副本，不直接修改原数组元素
      currentInvoice[itemIndex] = {...currentInvoice[itemIndex], Qty: currentInvoice[itemIndex].Qty + 1}
    }
    return {
      ...prev,
      [activeInvoice]: currentInvoice
    }
  })
}

核心优化点 #

• 所有修改都基于副本操作，完全避免了引用共享导致的跨发票数据同步变更问题
• 所有可变数据都存入React状态，组件重渲染不会丢失数据
• 移除了手动DOM操作，所有视图变化都由状态驱动，符合React的设计逻辑，稳定性更高

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