PayPal按钮无法读取React新state，如何在React中对接PayPal使用动态值？

问题根源 #

@paypal/react-paypal-js 提供的PayPalButtons组件默认仅在首次初始化时绑定传入的createOrder等回调函数，后续父组件重渲染时如果没有触发按钮本身的重渲染，回调内部通过闭包捕获的永远是首次渲染时的状态值，也就是你看到的结账时始终取初始值5.00的问题。

解决方案 #

方案1：使用官方提供的forceReRender属性

这是库方专门为状态更新场景设计的属性，把需要监听的变化值放到数组中，对应值变化时按钮会自动重新绑定最新回调，拿到最新状态：

<PayPalButtons
  createOrder={(data, actions) => createOrder(data, actions)}
  onApprove={(data, actions) => onApprove(data, actions)}
  onError={onError}
  forceReRender={[payAmount]}
/>

方案2：绑定动态key触发组件重挂载

如果上述方案不生效，可以直接给组件绑定和金额关联的动态key，每次金额变化时按钮组件会销毁重建，自然会使用最新的状态值：

<PayPalButtons
  key={payAmount}
  createOrder={(data, actions) => createOrder(data, actions)}
  onApprove={(data, actions) => onApprove(data, actions)}
  onError={onError}
/>

方案3：用useRef存储最新金额避免闭包问题

不想触发按钮重渲染的话，可以用ref同步最新的金额值，回调中直接读取ref的current值即可：

const [payAmount, setPayAmount] = useState('5.00');
// 新增ref同步金额
const payAmountRef = useRef(payAmount);
// 监听金额变化更新ref
useEffect(() => {
  payAmountRef.current = payAmount;
}, [payAmount]);

// createOrder中读取ref的值
const createOrder = (data, actions) => {
  return actions.order.create({
    purchase_units : [
      {
        amount: {
          value: payAmountRef.current
        }
      }
    ]
  })
};

额外代码优化 #

你当前的PriceButton组件存在计算bug：parseInt(multPrice)会直接截断小数位，比如10.99会被转成10，导致税费计算错误，建议修改为：

// 修改前
const withTaxPrice = (parseInt(multPrice) + .5).toFixed(2).toString();
// 修改后
const withTaxPrice = (parseFloat(multPrice) + 0.5).toFixed(2);

toFixed返回值本身就是字符串类型，无需额外调用toString。

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