为什么会收到错误

Question

我之前有过这样的工作，但我现在对于发生的事情感到难过。我使用Next.js进行SSR，我的Pay元素如此：

class Pay extends React.Component {
  constructor() {
    super();
    this.state = { stripe: null };
  }

  componentDidMount() {
    console.log(window.Stripe)
    this.setState({
      stripe: window.Stripe('pk_test_123'),
    });
  }

  render() {
    console.log(this.state)
    return (
      <StripeProvider apiKey={this.state.stripe}>
        <Elements>
          <InjectedCheckoutForm />
        </Elements>
      </StripeProvider>
    );
  }
}

以上引发错误：

请通过＆＃39; apiKey＆＃39;或者＆＃39; stripe＆＃39;到StripeProvider。如果你是使用＆＃39; stripe＆＃39;但是还没有Stripe实例，通过＆＃39; null＆＃39; 明确。

我在这里感到困惑的是，因为页面会抛出500错误，因此窗口和状态都会被记录。如果我删除了StripeProvider组件，window.Stripe会很好地注销，而this.state包含我的Stripe状态，所以我无法理解为什么它会抛出错误。

Answer 1

为什么会收到错误

<StripeProvider />想要初始渲染中的apiKey或stripe道具，如错误所示。

在初始渲染时，state.stripe为null，因此随后为<StripeProvider apiKey=null>。这引发了500错误，因为只有StripeProvider的this.props.stripe被空检查，因此它可以理解消费者方面正在发生一些异步事情。

https://github.com/stripe/react-stripe-elements/blob/master/src/components/Provider.js#L105

this.props.apiKey null导致您出错，因为apiKey的处理方式不同。 https://github.com/stripe/react-stripe-elements/blob/master/src/components/Provider.js#L110

解决方案

我认为问题在于你只是使用了错误的属性。从StripeProvider.apiKey切换到StripeProvider.stripe。 apiKey接受string类型，而stripe接收StripeObject（也是window.Stripe()您的<StripeProvider stripe={this.state.stripe}> <Elements> <InjectedCheckoutForm /> </Elements> </StripeProvider>返回的内容。

stripe

观看https://github.com/stripe/react-stripe-elements#loading-stripejs-asynchronously和https://github.com/stripe/react-stripe-elements#server-side-rendering-ssr的代码示例，了解更多信息。

沙箱：https://codesandbox.io/s/x2r1pxwjqz

尝试更改apiKey - ＆gt; uuidUdf = udf(lambda x: str(uuid.uuid4()), StringType()) df = df.withColumn("id", uuidUdf())看到错误弹出。

请通过＆＃39; apiKey＆＃39;或者＆＃39; stripe＆＃39;到StripeProvider

1 个答案:

为什么会收到错误

解决方案