Javascript Stripejs props对象向我发送了一条错误消息；对象可能为空"；当我尝试使用它来创建令牌ie props.stripe.createToken（）时

在checkoutForm组件中的handleSubmit方法中，我希望通过ReactStripeElements.InjectedStripeProps的接口，Stripe将具有能够使用createToken（{}）的可用道具。 下面是我的CheckoutForm组件以及嵌套在第一页CheckoutForm中的Elements组件。 我还有一个带apiKey的StripeProvider，在下面的第二页。StripeProvider位于App.tsx中，它包裹着App.tsx中的所有内容。我想知道API键是否能给我提供准确的错误消息，或者我是否遗漏了导致该错误的任何其他信息

import React from "react"
    import {
      injectStripe,
      ReactStripeElements,
      CardElement,
    } from "react-stripe-elements"
    
       interface IFormProps extends ReactStripeElements.InjectedStripeProps {}
    //Allow for props to be passed on to CheckoutForm from Stripe API wthout passing them in directly ourselves

    export const CheckoutForm = (props: IFormProps) => {
    
      const handleSubmit = async (e: React.ChangeEvent<HTMLFormElement>) => {
        e.preventDefault()
        try {
          let token = await props.stripe.createToken({name: name})
        } catch (e) {
          throw e
        }
      }
    
      return (
        <>
        <form onSubmit={handleSubmit}> 
                <CardElement />
          </form>
        </>
      )
    }
    

    
    export default injectStripe(CheckoutForm)

从“React”导入React
进口{
条纹，
反应性元素，
CardElement，
}从“反应条纹元素”
接口IFormProps扩展ReactStripeElements.InjectedStripeProps{}
//允许道具从Stripe API传递到CheckoutForm，而不是直接传递给我们自己
导出常量CheckoutForm=（道具：IFormProps）=>{
const handleSubmit=async（e:React.changevent）=>{
e、 预防默认值（）
试一试{
let token=wait props.stripe.createToken（{name:name}）
}捕获（e）{
掷e
}
}
返回(
)
}
导出默认条带（CheckoutForm）

/*---下面第二页--*/

从“React”导入React
从“@material ui/styles”导入{ThemeProvider}”
从“/ui/theme”导入主题
从“react router dom”导入{Route}
从“/routes/Shoppingcart/Shoppingcart”导入Shoppingcart
从“react stripe Elements”导入{Elements，StripeProvider}
函数App（）{
返回(
(
)}
/>
)
}
导出默认应用程序

你到底从哪里得到这个消息的？哎呀，我要更新一下。我从handlesubmit方法中得到消息，在第一页的try/catch块中，CheckoutForm.tsx.Ahh我明白了。这真是一个愚蠢的建议，但是如果你只是在props.stripe不是未定义的情况下尝试运行create令牌，会发生什么呢？我实际上试着输入了它，并感到“内疚”，因为我不知道为什么会出现这个错误，但教程中的其他人并不是出于某种原因。我将试着看看这是否一直有效，没有问题。简单看一下TS定义，似乎

stripe

可以为空：至于为什么会这样。。。不太确定。

import React from "react"
import { ThemeProvider } from "@material-ui/styles"
import theme from "./ui/Theme"
import { Route } from "react-router-dom"

import Shoppingcart from "./routes/shoppingcart/Shoppingcart"

import { Elements, StripeProvider } from "react-stripe-elements"

function App() {

  return (
    <>
      <StripeProvider apiKey="APIKEY_WOULD_BE_HERE">
        <ThemeProvider theme={theme}>

                <Elements>
                  <Route
                    exact
                    path="/shoppingcart"
                    component={() => (
                      <Shoppingcart
                      />
                    )}
                  />
                </Elements>

        </ThemeProvider>
      </StripeProvider>
    </>
  )
}

export default App