reactjs - 元素 : You cannot change the `stripe` prop after setting it 上不支持的 Prop 更改

Question

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

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);

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

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