React中PayPal按钮total sum总金额参数报错如何修复

报错核心是PayPal按钮创建订单时的金额字段传参格式错误，多余的花括号导致传入的参数类型完全不符合PayPal SDK要求：

1. 你当前写的value: {getTotalSum()}属于纯JS逻辑区域的对象赋值，不是JSX标签内的文本插值，套一层大括号等于给value字段传了一个JS对象，而PayPal要求value是代表金额的字符串。
2. 之前编辑器提示加花括号是误判，把纯JS代码区域识别成了JSX文本区域，按提示加花括号反而把参数类型写错了。

PayPal订单接口对amount.value字段的强制要求：必须是最多包含两位小数的数字字符串，传对象、数字类型、超过两位小数的数值、空值都会直接触发参数校验错误。

1. 修正金额字段传值 #

把PayPal配置里的错误金额写法替换成符合要求的格式：
错误代码段：

amount: {
  value: {getTotalSum()},
},

替换为：

amount: {
  currency_code: "GBP", // 显式声明币种为英镑，和你页面展示的£符号对应
  value: getTotalSum(), // 传入计算好的两位小数字符串
},

2. 优化总金额计算逻辑，避免浮点数精度问题 #

原计算逻辑直接累加浮点数，可能出现0.1+0.2=0.30000000000000004这类异常值导致PayPal接口报错，把getTotalSum方法修改为：

const getTotalSum = () => {
  // 按最小货币单位（便士）计算，规避浮点数误差
  const totalInPenny = cart.reduce(
    (sum, { cost, quantity }) => sum + Math.round(cost * 100) * quantity,
    0
  );
  return (totalInPenny / 100).toFixed(2);
};

3. 增加异常边界判断 #

在创建订单逻辑开头加金额校验，避免空购物车、异常金额触发无效请求：

createOrder={(data, actions) => {
  const totalAmount = getTotalSum();
  if (Number(totalAmount) <= 0) {
    alert("购物车金额异常，无法发起支付");
    return actions.reject(); // 终止订单创建流程
  }
  return actions.order.create({
    purchase_units: [
      {
        amount: {
          currency_code: "GBP",
          value: totalAmount,
        },
      },
    ],
  });
}}

• 购物车为空时隐藏PayPal按钮，减少无效点击
• 给商品数量输入框加min="1"属性，同时在setQuantity方法里过滤小于1的数值、非数字输入，避免出现负金额、0金额的情况

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