reactjs - 请将 'apiKey' 或 'stripe' 传递给 StripeProvider

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

上面抛出错误:

Please pass either 'apiKey' or 'stripe' to StripeProvider. If you're using 'stripe' but don't have a Stripe instance yet, pass 'null' explicitly.

但我在这里感到困惑的是，当页面抛出 500 错误时，窗口和状态都不会被记录。如果我删除 StripeProvider 组件，window.Stripe 会正常注销，并且 this.state 包含我的 Stripe 状态，因此我无法理解为什么它会抛出错误。

Answer 1

为什么会收到错误

<StripeProvider />想要apiKey或stripe错误所示的初始渲染上的 prop。

在您的初始渲染中，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输入 while stripe接受 StripeObject (这也是您的 window.Stripe() 返回的内容)。

  <StripeProvider stripe={this.state.stripe}>
    <Elements>
      <InjectedCheckoutForm />
    </Elements>
  </StripeProvider>

观察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

尝试更改stripe -> apiKey查看弹出的错误。