Elements 上不支持的道具更改：设置后您无法更改“条纹”道具

Posted 2023-03-21

【中文标题】Elements 上不支持的道具更改：设置后您无法更改“条纹”道具

【英文标题】：Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it

【发布时间】：2021-02-17 22:35:04

【问题描述】：

Stripe Payment 完全可用，但我在控制台上收到警告消息，“Elements 上的道具更改不受支持：设置后您无法更改 stripe 道具。” 这是我的代码。我不知道为什么会显示警告消息，我错过了什么？

const Parent =() => 
        const stripePromise = loadStripe(PUBLISHABLE_KEY);
        <Elements stripe =stripePromise>
          <Child_component/>
        </Elements> 

export default Parent;

import CardNumberElement, CardExpiryElement, CardCvcElement from '@stripe/react-stripe-js';
const Child_component =() => 
        const handleChange = (event) => 
               //get the brand type
        ;
        const handleFormSubmit = async ev =>
           const cardElement = elements.getElement(CardNumberElement);
           const paymentMethodReq = await stripe.createPaymentMethod(
                    type: 'card',
                    card: cardElement
           );
           /// and send paymentMethodReq to the backend.
        
   render(
       <Form className="" onSubmit=handleFormSubmit>
        <div className="split-form full-width inline-block pt-4">
            <div className="row">
                <div className="col-12">
                    <label className="card-element">
                        Card number
                        <CardNumberElement
                        className="cardNumberElement"
                        onChange=handleChange
                        />
                    </label>
                </div>
                <div className="col-8">
                    <label className="card-element">
                        Expiration date
                        <CardExpiryElement
                        onChange=handleChange
                        />
                    </label>
                </div>
                <div className="col-4">
                    <label className="card-element">
                        CVC
                        <CardCvcElement 
                        onChange=handleChange
                        />
                    </label>
                </div>
            </div>
        </div>
       </Form>
     )
 
 export default Child_component;

【问题讨论】：

你能证明你的完整组件吗？不清楚你在哪里使用它

@NikitaChayka 我更新了我的代码，请检查。谢谢！

【参考方案1】：

您的问题是在您的 Parent 组件中您只是这样做

const stripePromise = loadStripe(PUBLISHABLE_KEY);

这实际上意味着每次渲染你都会得到新的promise对象（新的stripePromise），这正是<Element>组件所抱怨的。相反，您应该做的是，为了不在渲染时一直获取新实例，您应该将 loadStripe 函数置于状态，但由于它是一个函数，因此您实际上需要将它包装在另一个函数中 - https://reactjs.org/docs/hooks-reference.html#lazy-initial-state。

那么应该是什么样子：

const [stripePromise, setStripePromise] = useState(() => loadStripe(PUBLISHABLE_KEY))

【讨论】：

确实有效，不再显示警告消息。非常感谢！

如果我们将stripePromise变量移到函数组件之外呢？

Noman Gul 你的更干净，而且可以工作。

【参考方案2】：

我有同样的错误。

如果我们将 stripePromise 变量移到函数组件之外会怎样？ – Noman Gul 2 月 5 日 17:35

这是理想的解决方案如果组件不依赖于状态。

如果你想将一个选项传递给loadStripe，你应该使用useMemo 来记忆承诺。

const Parent = ( stripeAccount ) => 
  const stripePromise = useMemo(
    () => loadStripe(PUBLISHABLE_KEY,  stripeAccount ),
    [stripeAccount],
  )

  return (
    <Elements stripe=stripePromise>
      <Child_component/>
    </Elements> 
  )

否则，组件会在每次渲染时加载条带！

【参考方案3】：

使用 Noman 的注释的示例，只是将 promise 移到功能组件之外

如果我们将 stripePromise 变量移到函数之外呢？ 零件？ – Noman Gul 2 月 5 日 17:35

这对我来说非常有效。

const stripePubKey = 'your-stripe-publishable-key';
const stripePromise = loadStripe(stripePubKey);

const Parent: React.FC = () => 
  return (
    <Elements stripe=stripePromise>
      <Child />
    </Elements> 
  )