集成Stripe支付时出现React Invalid Hook Call错误该如何解决？

你的代码本身没有违反Hook调用规则，按报错给出的三类原因逐一排查即可： #

1. 排查React与ReactDOM版本不匹配 #

• 打开项目根目录的package.json，查看dependencies下的react和react-dom版本号是否完全一致
• 同时确认@stripe/react-stripe-js版本兼容当前React版本，建议升级到Stripe官方最新稳定版
• 版本不一致的话执行统一重装命令：

# npm 示例，将x.y.z替换为统一的版本号，比如18.2.0
npm install react@x.y.z react-dom@x.y.z @stripe/react-stripe-js @stripe/stripe-js
# yarn 示例
yarn add react@x.y.z react-dom@x.y.z @stripe/react-stripe-js @stripe/stripe-js

2. 排查多份React副本冲突 #

• 执行命令检查当前项目依赖的React版本：

npm ls react
# 用yarn的话执行 yarn list react

• 如果输出中存在多个版本的React，说明存在多副本冲突
• 解决方法：
  • npm 8.0+版本：在package.json中添加overrides配置固定版本：

  "overrides": {
    "react": "x.y.z",
    "react-dom": "x.y.z"
  }
  

  • Yarn版本：在package.json中添加resolutions配置固定版本：

  "resolutions": {
    "react": "x.y.z",
    "react-dom": "x.y.z"
  }
  

  配置完成后删除node_modules和锁文件（package-lock.json/yarn.lock），重新执行依赖安装命令即可

3. 排查Stripe专属调用场景问题 #

• 确认所有调用useStripe、useElements Hook的组件，都被包裹在Elements组件的子层级中，不能在Elements之外调用这两个Hook
• 如果你使用的是Next.js、Remix等SSR/SSG框架，需要在Stripe相关组件文件顶部添加客户端声明（比如Next.js 13+ App Router需要加'use client'），避免服务端渲染时调用Hook触发报错
• 确认你没有将CheckoutForm作为普通函数调用，必须以<CheckoutForm />的组件形式渲染

内容的提问来源于stack exchange，提问作者Güney