Reactjs 请通过'；apiKey&x27；或'；条纹'；脱衣提供者

我以前做得很好，但现在我很困惑到底发生了什么。我将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>
    );
  }
}

类支付组件{
构造函数（）{
超级（）；
this.state={stripe:null}；
}
componentDidMount（）{
console.log（window.Stripe）
这是我的国家({
stripe:window.stripe（'pk_test_123'），
});
}
render（）{
console.log（this.state）
返回(
);
}
}

上面的代码抛出错误：

请将“apiKey”或“stripe”传递给StripeProvider。如果你是 使用“stripe”，但还没有stripe实例，请传递“null” 明确地说

但我在这里感到困惑的是，实际上，窗口和状态都没有被记录，因为页面抛出了一个500错误。 如果我删除StripeProvider组件，window.Stripe将正常注销，而this.state包含我的Stripe状态，因此我无法理解它为什么会抛出错误。

为什么会出现错误

希望在初始渲染上使用

apiKey

或

条带

道具，如错误所示

在初始渲染时，

state.stripe

为

null

，因此随后为

。这会引发500错误，因为只有StripeProvider的

This.props.stripe

被检查为空，以便它能够理解在消费者方面发生了一些异步事件

this.props.apiKey

为

null

会导致错误，因为

apiKey

的处理方式不同

解决方案 但我认为问题在于你只是使用了错误的属性。从

StripeProvider.apiKey

切换到

StripeProvider.stripe

apiKey

接受

字符串

类型，而

stripe

接受

StripeObject

（这也是

窗口.stripe（）

返回的内容）

有关更多信息，请参见和中的代码示例

沙箱：

---

尝试更改

条带

->

apiKey

以查看弹出的错误。

啊，该死的，我怎么会错过这个。这就解决了，谢谢！

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