Paypal 按钮无法读取新的 React 状态。如何在 React 中使用动态值和 paypal？

Question

我目前正在开发一个应用程序的结账页面，用户可以以用户选择的三个价格之一购买最多三件商品（这主要是作为实验完成的）。当用户通过单击按钮选择价格时，会触发 setState 并将新价格存储到状态中。在执行 console.log 时，我看到新状态已设置，但在签出时，状态似乎重置为其初始值。我不知道为什么，也不知道从哪里开始。我想在初始渲染上贝宝会保持它传递的初始状态，并且需要在设置新状态时重新渲染，但不确定如何解决这个问题，或者即使这是问题。任何帮助或指导表示赞赏。

我正在使用这个@paypal/react-paypal-js库来实现贝宝，但我欢迎其他建议。

这是我正在使用的代码，但删除了相关部分：

import React, {useState, useRef, useEffect} from 'react';
import { PayPalButtons, usePayPalScriptReducer } from "@paypal/react-paypal-js";
import PriceButton from './PriceButton.jsx';
import NumberItemButton from './NumberItemButton';
import {priceOptions, amountItems} from './PriceOptions';



const PaymentPage = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [payAmount, setPayAmount] = useState('5.00');
  const [itemAmount, setItemAmount] = useState('1');

  const payPalOptions = { //Note: This is used in the higher level component PayPalScriptProvider
    "client-id": `${process.env.REACT_APP_PAYPAL_CLIENT_ID}`,
    currency: "USD",
    intent: "capture",
  };

  const createOrder = (data, actions) => { //This will show the initial state when triggered
    return actions.order.create({
      purchase_units : [
        {
          amount: {
            value: payAmount //This stays at the initial State of '5.00' despite the newState being set
          }
        }
      ]
    })
  };

  const onApprove = (data, actions) => {
    return actions.order.capture().then(function(orderData) {
          console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
          let transaction = orderData.purchase_units[0].payments.captures[0];
          alert('Transaction '+ transaction.status + ': ' + transaction.id + '\n\nSee console for all available details');
    }
  )};

  const onError = (error) => {
    console.log(error)
  }

  console.log(payAmount) //Note: This will show the new State
  return (
    <div>
        <h1>Purchase</h1>
        <label> Choose number of items
        <div>
          {amountItems.map((item, index) => {
            return <NumberItemButton key={index} setItemAmount={setItemAmount} amount={item.amount} />
          })}
        </div>
        </label>
        <label> Pick a price
          <div>
            {priceOptions.map((item, index) => {
              return <PriceButton key={index} itemAmount={itemAmount} setPayAmount={setPayAmount} price={item.price} />
            })}
          </div>
        </label>
        <PayPalButtons
          createOrder={(data, actions) => createOrder(data, actions)}
          onApprove={(data, actions) => onApprove(data, actions)}
          onError={onError}
        />  
    </div>
  );
}


export default PaymentPage;

我还将添加价格按钮组件，以防出现问题

const PriceButton = ({itemAmount, setPayAmount, price}) => { //itemAmount is the amount customer buys, price is the value passed through on the mapping function
  const multPrice = (itemAmount * price).toFixed(2);
  const withTaxPrice = (parseInt(multPrice) + .5).toFixed(2).toString();

  return (
    <button onClick={() => setPayAmount(withTaxPrice)}>${multPrice}</button>
  )
}

export default PriceButton;

感谢任何帮助！

Answer 1

我以全新的眼光重新审视这个问题并找到了解决方案（尽管我不确定这是否是最好的解决方案）。

问题是，当 Paypal 按钮呈现时，它会拉入所传递的初始状态，但当传递新状态时需要重新呈现。

forceReRender={[payAmount]}我的解决方案是在 PaypalButtons 组件中传递 a 。这会在价格状态更新时重新呈现 Paypal 按钮，并允许我传递更新后的值。

希望这对其他人有帮助！