React-Redux中函数内值未实时更新的PayPal支付问题求助

问题根源：闭包陷阱 #

PayPal的createOrder、onApprove等回调函数是在组件初始渲染时绑定的，它们会捕获当时的Redux状态或组件state值。后续你通过createTransaction更新Redux/state后，这些回调里的引用仍然是旧的初始值（null），所以在sendStatusUpdate中拿不到最新的transactionId。

可行解决方案 #

方案1：直接从PayPal回调参数中获取transactionId（推荐） #

不需要依赖Redux或state，直接在onApprove回调里从PayPal返回的order对象中提取transactionId，这是最可靠的方式：

const onApprove = async (data, actions) => {
  // 获取完整的订单信息
  const orderDetails = await actions.order.get();
  // 根据PayPal返回的结构提取transactionId（路径可能需要根据实际返回调整）
  const transactionId = orderDetails.id;
  // 若为捕获支付场景，可改用此路径：
  // const transactionId = orderDetails.purchase_units[0].payments.captures[0].id;

  const response = await sendApprovedTransaction(transactionId);
  if (!response.success) {
    // 直接传入获取到的transactionId，无需从Redux/state取值
    await sendStatusUpdate(transactionId);
  }
};

方案2：用Ref保存最新的transactionId #

如果必须依赖Redux/state，通过useRef同步最新值，避免闭包捕获旧值：

import { useRef, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

const SelectPaymentProvider = () => {
  const dispatch = useDispatch();
  const transactionIdRef = useRef(null);
  // 订阅Redux中的transactionId
  const currentTransactionId = useSelector(state => 
    state.order.paymentDetails.paymentProviderTransactionId
  );

  // 每次Redux值更新时，同步到Ref
  useEffect(() => {
    if (currentTransactionId) {
      transactionIdRef.current = currentTransactionId;
    }
  }, [currentTransactionId]);

  const createOrder = async (data, actions) => {
    const order = await actions.order.create({
      intent: 'CAPTURE',
      purchase_units: [{ amount: { value: '10.00' } }]
    });
    const orderId = order.id;
    // 存入Redux
    dispatch(createTransaction(orderId));
    return orderId;
  };

  const sendStatusUpdate = async () => {
    // 从Ref中获取最新的transactionId
    const transactionId = transactionIdRef.current;
    if (!transactionId) {
      console.error('Transaction ID not found');
      return;
    }
    // 执行状态更新逻辑
    // ...
  };

  const onApprove = async (data, actions) => {
    const response = await sendApprovedTransaction(data.orderID);
    if (!response.success) {
      await sendStatusUpdate();
    }
  };

  return (
    <PayPalButtons createOrder={createOrder} onApprove={onApprove} />
  );
};

方案3：用useCallback确保回调绑定最新状态 #

如果坚持使用state，用useCallback包裹回调并加入transactionId依赖，确保回调随状态更新重新绑定：

import { useState, useCallback } from 'react';

const SelectPaymentProvider = () => {
  const [transactionId, setTransactionId] = useState(null);

  const createOrder = useCallback(async (data, actions) => {
    const order = await actions.order.create({/* 订单配置 */});
    const orderId = order.id;
    setTransactionId(orderId);
    return orderId;
  }, []);

  const sendStatusUpdate = useCallback(async () => {
    if (!transactionId) return;
    // 执行状态更新逻辑
    // ...
  }, [transactionId]);

  const onApprove = useCallback(async (data, actions) => {
    const response = await sendApprovedTransaction(data.orderID);
    if (!response.success) {
      await sendStatusUpdate();
    }
  }, [sendStatusUpdate]);

  return <PayPalButtons createOrder={createOrder} onApprove={onApprove} />;
};

注意：此方案依赖组件重新渲染更新回调，若PayPal按钮组件未随state更新重新渲染，可能仍无法生效，因此优先选择方案1或方案2。

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