reactjs 元素上不支持的属性更改：设置后无法更改`stripe`属性

k2fxgqgv 于 10个月前发布在 React

关注(0)|答案(4)|浏览(116)

条纹支付是完全工作，但我得到了控制台上的警告消息，**“不支持的 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;

字符串

reactjs

来源：https://stackoverflow.com/questions/64693509/unsupported-prop-change-on-elements-you-cannot-change-the-stripe-prop-after-s

4条答案

按热度按时间

gdrx4gfi1#

您的问题是，在Parent组件中，

const stripePromise = loadStripe(PUBLISHABLE_KEY);

字符串
这意味着实际上在每个渲染器上你每次都会得到新的promise对象（new stripePromise），这正是<Element>组件所抱怨的。你应该做的是，不要在渲染器上总是得到新的示例，你应该把loadStripe函数放在state中，但是因为它是一个函数，你实际上需要把它 Package 在另一个函数中，因为这个-https://reactjs.org/docs/hooks-reference.html#lazy-initial-state。
所以应该看起来像：

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

型

赞(0）回复(0）举报 11个月前

q43xntqr2#

我也犯了同样的错误。
如果我们将stripePromise变量移到功能组件之外会怎么样？- Noman Gul 2月5日17：35
Noman的评论是大多数情况下的理想解决方案，但如果Stripe帐户依赖于React状态，则不起作用。如果您使用Stripe Connect构建应用程序，则通常会发生这种情况。
在这种情况下，您应该使用useMemo来存储promise。

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

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

字符串
否则，组件将在每次重新渲染时加载条带！

赞(0）回复(0）举报 11个月前

1yjd4xko3#

使用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> 
  )
}

字符串

赞(0）回复(0）举报 11个月前

3wabscal4#

对我来说，我遇到的情况是，当我的地区发生变化时，我需要重新示例化stripe。（例如使用next-i18 next）
我尝试了上述解决方案，它们都不起作用，但我发现只要在绑定<Elements />示例化上设置key属性就可以了。

const stripePromise = loadStripe(process.env.YOUR_KEY);

const App = () => {
  const { i18n } = useTranslations();
  ...

  return (
    <Elements 
      key={i18n.language}
      stripe={stripePromise}
      options={{ locale: i18n.language }}
    >
      ...
    </Elements>
  )
}

字符串

赞(0）回复(0）举报 11个月前

我来回答

reactjs 元素上不支持的属性更改：设置后无法更改`stripe`属性

4条答案

相关问题

热门标签

最新问答