时间戳

首页 > 解决方案 > 条纹。TypeError：document.querySelectorAll 不是函数

javascript - 条纹。TypeError：document.querySelectorAll 不是函数

问题描述

我正在使用 Meteor 框架和 React。

添加了@stripe 包。付款表格有效，但它不断在日志中显示以下内容：

UnhandledPromiseRejectionWarning: TypeError: document.querySelectorAll is not a function
at findScript (/project/node_modules/@stripe/stripe-js/dist/stripe.js:9:26)
at /project/node_modules/@stripe/stripe-js/dist/stripe.js:75:20
at 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:10
at /.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

我怎么解决这个问题？

标签： javascriptnode.jsmeteorstripe-payments

解决方案

这似乎是您在服务器上看到的错误（否则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参数是为了避免（常见的）React 错误，即在客户端上与从服务器返回的形状不同的 HTML 水合。

推荐阅读