Reactjs 更改购物车中的产品数量后，PayPal ReactionNext JS按钮未更新

我遇到了Reaction PayPal按钮集成的问题.当我直接在购物车中更改产品数量时，本地存储和购物车中的产品正在更新，但更改不会反映在PaypalButton组件props createOrder和onApprove中.因此，PayPal标准 checkout 中的总金额是不正确的，无法将正确的产品数量放入我的数据库中.

下面是相关代码:

'use client'

import { PayPalButtons, PayPalScriptProvider } from '@paypal/react-paypal-js'
import { createPaypalOrder, handlePaypalCheckout } from '../../_actions/paypal'
import { useRouter } from 'next/navigation'
import { useContext } from 'react'
import { CartContext } from '@/app/_context/CartContext'
import { toast } from '../ui/use-toast'
import { useSession } from 'next-auth/react'
export default function PaypalButton({ total, uniqueProducts }) {
  console.log('🚀 ~ PaypalButton ~ uniqueProducts:', uniqueProducts)
  console.log('🚀 ~ total:', total)
  const { data: session } = useSession()
  console.log('🚀 ~ session:', session?.user.email)
  const { setShowCart } = useContext(CartContext)

  const router = useRouter()

  const captureOrder = async (orderId) => {
    try {
      const res = await fetch('/api/paypal/capture', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ orderId: orderId }),
      })

      const orderCapture = await res.json()

      if (orderCapture.status == 200) {
        const orderId = await createPaypalOrder(
          uniqueProducts,
          orderCapture.response.result,
          total,
          session?.user.email,
        )
        setShowCart(false)
        router.push(`/order/success?order_id=${orderId}`)
      }
    } catch (error) {
      toast({
        title: 'Invalid payment',
        variant: 'destructive',
      })
      console.log('🚀 ~ captureOrder ~ error:', error)
    }
  }

  const createOrderAction = async () => {
    try {
      console.log(total)
      console.log(uniqueProducts)

      const res = await fetch('/api/paypal', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ total: total }),
      })
      const order = await res.json()
      if (order.id) return order.id
      else {
        const errorDetail = order?.details?.[0]
        const errorMessage = errorDetail
          ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
          : JSON.stringify(orderData)

        throw new Error(errorMessage)
      }
    } catch (error) {
      console.log('🚀 ~ createOrderAction ~ error:', error)
      console.error(error)
    }
  }

  return (
    <div>
      <PayPalScriptProvider
        options={{
          clientId:
            'test',
          disableFunding: 'card',
          currency: 'EUR',
        }}
      >
        <PayPalButtons
          style={{
            color: 'gold',
            disableMaxWidth: 'true',
          }}
          createOrder={async (data, actions) => {
            const orderId = createOrderAction()
            return orderId
          }}
          onApprove={async (data, actions) => {
            const orderCapture = await captureOrder(data.orderID)
            if (orderCapture) return true
          }}
          onCancel={(data) => {}}
          onError={(err) => {
            console.log('🚀 ~ err:', err)
            console.error('PayPal Checkout onError', err)
          }}
        />
      </PayPalScriptProvider>
    </div>
  )
}

在我更改数量之前，控制台登录的createOrder和onApprove总是显示旧的唯一产品和总数

在创建订单时，我try 在请求正文中传递更新的产品项，但在捕获订单时无法检索它们.我还try 直接在本地存储中检索更新的产品，并在获取后端之前使用useRef获取总的产品，它工作在DataOrderAction中，但不是captureOrder，captureOrder是将数据发送到我的数据库的关键.