React多子组件向父组件传值实现动态计算与更新商品总价的方法

现有代码的计算逻辑存在两个根本缺陷，导致总价永远无法正确更新：

• 父组件仅存储了总价的累加结果，没有记录每个商品对应的历史小计值。当用户修改某商品的购买数量时，父组件只能拿到新的小计值，无法扣减该商品之前的旧值，最终只会出现“只加新值、不扣旧值”的累加错误
• 父组件的更新逻辑setTotal(total + subtotal)存在React状态闭包陷阱，当同一渲染周期内多个子组件触发更新时，读取到的total值可能是过期的快照，进一步放大计算偏差

如果不想大改现有父子组件通信的架构，只需要调整父组件的状态结构，让总价能够通过明细动态派生计算即可，不需要单独维护total状态。
核心思路：父组件新增一个状态，专门用来存储每个商品对应的实时小计值，形成一个和商品列表一一对应的“明细账本”。每次子组件传值时，只需要替换账本中对应商品的旧值为新值，最终总价把账本上的所有值累加就行。

1. 父组件改造代码：

   import { useState } from 'react';
   function Total({ products }) {
     // 初始化时给每个商品对应一个初始为0的小计位，和products列表顺序一一对应
     const [subtotals, setSubtotals] = useState(
       () => products.map(() => 0)
     );
   
     // 回调接收两个参数：被修改的商品索引、该商品的新小计值
     const handleChildToParent = (productIndex, newSubtotal) => {
       setSubtotals(prevState => {
         // 基于旧的账本生成新账本，替换对应位置的值
         const updatedSubtotals = [...prevState];
         updatedSubtotals[productIndex] = newSubtotal;
         return updatedSubtotals;
       })
     };
   
     // 总价直接通过账本明细计算，不需要单独存状态
     const total = subtotals.reduce((sum, current) => sum + current, 0);
   
     return (
       <div>
         {products.map((product, index) => (
           <Subtotal 
             product={product} 
             productIndex={index}
             childToParent={handleChildToParent} 
           />
         ))}
         <span>Total: {total}</span>
       </div>
     );
   }
   

2. 子组件改造代码：
   触发回调时把自己对应的商品索引一起传给父组件，让父组件能够定位到要更新的明细位：

   function Subtotal({ product, productIndex, childToParent }) {
     const [units, setUnits] = useState(0);
   
     const handleInputChange = (value) => {
       // 处理输入为空的场景，避免出现NaN计算错误
       const unitsNum = Number(value) || 0;
       setUnits(unitsNum);
       const newSubtotal = unitsNum * product.price;
       // 把商品索引一起传给父组件
       childToParent(productIndex, newSubtotal);
     };
   
     return (
       <div>
         <input
           type="number"
           min={1}
           onChange={(e) => handleInputChange(e.target.value)}
           value={units}
         />
         <span>units * product price: {units * product.price}</span>
       </div>
     );
   }
   

注意：用数组索引定位商品的前提是传入的products列表顺序固定、不会动态删除/调整顺序。如果列表存在动态变动，建议给每个商品设置唯一id，把subtotals改成以id为键的对象结构，更新时通过id匹配替换值，逻辑完全一致。

这类多子组件联动计算总价的场景，更符合React设计理念的实现是状态提升：
既然每个子组件的购买数量会直接影响全局总价，不如把“购买数量”这个状态直接移到父组件统一管理，让子组件变成纯受控组件，不需要自己维护数量状态。
这种方案的优势：

• 所有购物车相关的数据（商品信息、数量、小计）都在父组件一处维护，完全遵循单向数据流，不存在子父组件传值不同步的问题
• 不需要处理“旧值扣减”的逻辑，所有小计、总价都可以直接遍历父组件的商品列表实时计算
• 后续如果要加商品删除、批量修改数量、价格联动折扣等功能，代码改动成本极低

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