javascript - 使用旧状态的 PayPal 智能支付按钮

Question

所以场景是我有一个 React + Redux 电子商务商店，并且有一个结帐页面，其中列出了购物车中的所有商品。这工作正常，每次我添加产品时按钮都会重新呈现，但是，可以选择从结帐页面上的购物车中删除项目，虽然实际状态发生变化，但 Paypal 按钮使用旧状态(我假设是因为按钮没有被重新渲染)。我已将按钮包装在一个 useEffect 函数中，每次购物车中的项目发生状态更改时，该函数都应该运行，但是，情况并非如此，我只是想不通原因。

代码如下:

import {useSelector, useDispatch} from 'react-redux'
import {removeProduct} from '../redux/cart/cart.actions'
import './Cart.scss'
import CartItem from '../components/cartComponent/cartItem'


const mapState = ({ cart }) => ({
    itemsInCart: cart.itemsInCart,
    total: cart.total

})

const Cart = props => {

    const [paidFor, setPaidFor] = useState(false);
    const dispatch = useDispatch();
    const {itemsInCart} = useSelector(mapState);
    const {total} = useSelector(mapState);
    let paypalRef = useRef();

    const clickHandler = (e) => {
        e.preventDefault();
        const removeIndex = itemsInCart.findIndex(item => {
           return item.id === e.target.id
    })
        dispatch(removeProduct(removeIndex,itemsInCart[removeIndex]))
    }

        useEffect(() => {
            window.paypal
              .Buttons({
                createOrder: (data, actions) => {
                  return actions.order.create({
                    purchase_units: [
                      {
                        description: "product.description",
                        amount: {
                          currency_code: 'USD',
                          value: total,
                        },
                      },
                    ],
                  });
                },
                onApprove: async (data, actions) => {
                  const order = await actions.order.capture();
                  setPaidFor(true);
                  console.log(order);
                },
                onError: err => {
                  setError(err);
                  console.error(err);
                },
              })
              .render(paypalRef.current);
          },[itemsInCart]);
                
    return (
        <>
        {paidFor ? (
            <div><h1>Congrats you just bought an Article</h1></div>
        ):
        <>
        <h1>Your Shopping Cart</h1>
        <div className = "main">
            <form className="cart-area">
                <ul className="cart-ui">
                     {itemsInCart.map((item, index)=> {
                        return <CartItem
                        clicked={clickHandler}
                        name={item.name}
                        price={item.price}
                        id={item.id}
                        key={index}
                        />
                     })}
                </ul>
 
                <div className="cart-summary">
                    <div className ="cart-wrapper">
                     <div className="name-price-wrapper">
                     <p className="name">Items</p>
                     <p className="price">{total}€</p>
                     </div>
                     <div ref={paypalRef}></div>
                     </div>
                </div>
            </form>
        </div>
        </>
        } 
     </>
    )
}
export default Cart;

当我将 useEffect Hook 更改为例如总是重新渲染，我多次获得按钮(取决于我删除了多少项目)，当单击底部的按钮时，它实际上以正确的数量工作。所以我必须关闭前面的按钮，因为它们已被渲染。

当关注来自@Preston PHX 的引用帖子时，我的代码如下所示:

useEffect(() => {
          if(window.myButton) window.paypal.close();
          window.myButton = window.paypal
              .Buttons({
                createOrder: (data, actions) => {
                    console.log(total)
                  return actions.order.create({
                    purchase_units: [
                      {
                        description: "product.description",
                        amount: {
                          currency_code: 'USD',
                          value: total,
                        },
                      },
                    ],
                  });
                },
                onApprove: async (data, actions) => {
                  const order = await actions.order.capture();
                  setPaidFor(true);
                  console.log(order);
                },
                onError: err => {
                  setError(err);
                  console.error(err);
                },
              })
              .render(paypalRef.current)

          });

这里我得到错误 window.myButton.close() is not a function ...?

Answer 1

您误解了 useEffect 的参数:https://reactjs.org/docs/hooks-effect.html

它将导致效果仅在 如果 参数更改时运行

无论什么时候参数改变，它都不会导致效果运行

---

另一个可能的问题是关闭现有的按钮，如果你真的要重新渲染它们的话。如果您的 purchase_units 对象引用在单击按钮时评估的动态变量/函数，则不需要重新呈现它们。但是，如果您要重新呈现按钮，则可能需要关闭现有按钮。您可以通过在调用 .render 之前存储对 window.PayPal.Buttons(...) 的引用来执行此操作，这样您就可以在第二次调用 .render 之前调用 .close()(如果已定义)。

关于如何做到这一点的答案:https://stackoverflow.com/a/62349799/2069605