React-Redux购物车组件计算商品总价的实现问题咨询

实现步骤 #

1. 修正单商品行的小计显示

你当前表格的Price Total列只展示了单品单价，没有乘以数量，直接修改Cart组件render函数里对应单元格的内容即可：

// 原代码
<td>{cartProduct.price}</td>
// 修改为
<td>{(cartProduct.price * cartProduct.quantity).toFixed(2)}</td>

toFixed(2)用于保留两位小数，避免浮点运算精度问题导致的金额显示异常。

2. 新增购物车总总价展示（可选）

如果需要在表格底部显示所有商品的合计总价，可以在</tbody>结束标签后添加tfoot部分：

</tbody>
{/* 新增合计行 */}
<tfoot>
  <tr>
    <td colSpan="4" className="text-right"><strong>Total Amount:</strong></td>
    <td><strong>{cartProducts.reduce((total, item) => total + item.price * item.quantity, 0).toFixed(2)}</strong></td>
    <td></td>
  </tr>
</tfoot>

3. 修复Reducer的不可变更新问题（必改，避免状态更新不触发渲染）

你当前的Reducer代码里直接修改了原state的对象，违反了Redux状态不可变的原则，可能会导致页面不响应状态更新的问题，修改ADD_TO_CART分支的逻辑：

case ADD_TO_CART:
  const itemIndex = state.cart.findIndex(obj => obj.id === action.payload.id);
  if (itemIndex >= 0) {
    // 新建修改后的商品对象，不修改原state内容
    const updatedItem = {
      ...state.cart[itemIndex],
      quantity: parseInt(state.cart[itemIndex].quantity) + 1
    };
    return {
      cart: [
        ...state.cart.slice(0, itemIndex),
        updatedItem,
        ...state.cart.slice(itemIndex + 1)
      ]
    };
  } else {
    // 新增商品默认quantity为1
    return {
      cart: [...state.cart, {...action.payload, quantity: action.payload.quantity || 1}]
    };
  }

修改完成后，添加/修改商品数量时，小计和总总价都会自动同步更新。

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