类型错误：document.querySelectorAll 不是函数

Question

我正在使用 Meteor 框架和 React。添加了@stripe包。付款表单有效，但它不断在日志中显示以下内容：UnhandledPromiseRejectionWarning: TypeError: document.querySelectorAll is not a functionat findScript (/project/node_modules/@stripe/stripe-js/dist/stripe.js:9:26)at /project/node_modules/@stripe/stripe-js/dist/stripe.js:75:20at new Promise (<anonymous>)at loadScript (/project/node_modules/@stripe/stripe-js/dist/stripe.js:57:19)at /project/node_modules/@stripe/stripe-js/dist/stripe.js:113:10at /.meteor/packages/promise/.0.11.2.1e1wn8z.joczg++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/meteor-promise/fiber_pool.js:43:40我怎么解决这个问题？

Answer 1

这似乎是您在服务器上看到的错误（否则路径node_modules将不会显示）。所以看来您正在尝试在服务器端渲染条纹形式。这不起作用，因为服务器上不存在该功能。我认为最好的选择是在使用这种条纹形式的反应组件中添加一个防护。像这样的东西：

const MyPaymentForm = (props) => {

  if (Meteor.isServer) {

    return <div>Stripe form will load dynamically on client</div>;

  }

  render <div suppressHydrationWarning={true}>

    <StripeProviver>...</StripeProvider>

  </div>;

};

客户端版本上的参数suppressHydrationWarning是为了避免有关水合 HTML 的（常见）React 错误，该错误在客户端上的形状与从服务器返回的形状不同。