Elements 上不支持的道具更改：设置后无法更改 `stripe` 道具

Question

Stripe Payment 完全正常，但我在控制台上收到警告消息，“元素上不支持的道具更改：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;

Answer 1

你的问题是在你的Parent组件中你只是做

const stripePromise = loadStripe(PUBLISHABLE_KEY);

这意味着实际上在每次渲染时，您每次都会获得新的承诺对象 (new stripePromise)，这正是<Element>组件所抱怨的。你应该做什么，为了不总是在渲染时获得新实例，你应该将 loadStripe 函数置于 state 中，但因为它是一个函数，你实际上需要将它包装在另一个函数中，因为这个 - https:// reactjs.org/docs/hooks-reference.html#lazy-initial-state。

那么应该是什么样子：

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

Answer 2

我有同样的错误。

\n

\n

如果我们将 stripePromise 变量移到功能组件之外会怎样？\xe2\x80\x93 诺曼·古尔 2 月 5 日 17:35

\n

\n

Noman 的评论是大多数情况下的理想解决方案，但如果 Stripe 帐户依赖于 React 状态，那么这不起作用。如果您使用 Stripe Connect 构建应用程序，通常会发生这种情况。

\n

在这种情况下，你应该用来useMemo记住这个承诺。

\n

const Parent = ({ stripeAccount }) => {\n  const stripePromise = useMemo(\n    () => loadStripe(PUBLISHABLE_KEY, { stripeAccount }),\n    [stripeAccount],\n  )\n\n  return (\n    <Elements stripe={stripePromise}>\n      <Child_component/>\n    </Elements> \n  )\n}\n

\n

否则，组件每次重新渲染都会加载条带！

\n