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

【问题标题】：Unsupported prop change on Elements: You cannot change the `stripe` prop after setting itElements 上不支持的道具更改：设置后您无法更改“条纹”道具
【发布时间】：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 我更新了我的代码，请检查。谢谢！

标签： reactjs stripe-payments next.js

【解决方案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> 
  )
}

【讨论】：