使用BizCharts图表库时出现Invalid Hook Call错误该如何解决？

1. 检查组件调用方式 #

确认你引用Biz组件的位置遵循React组件规范，使用<Biz />标签形式调用，不要当成普通函数执行Biz()，也不要在类组件生命周期方法、普通JS函数里直接调用组件。

2. 排查React多版本冲突 #

这是该类问题最常见的诱因，BizCharts内部使用了React Hooks，如果项目里同时存在多份React副本，就会触发Hook调用规则校验失败。

• 执行命令检查React版本：

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

如果输出结果里有多个不同版本的React，就需要锁定版本：

• 如果你用yarn，在package.json里新增resolutions字段：

"resolutions": {
  "react": "^17.0.2",
  "react-dom": "^17.0.2"
}

• 如果你用npm >=8.3，在package.json里新增overrides字段：

"overrides": {
  "react": "^17.0.2",
  "react-dom": "^17.0.2"
}

配置完成后删除node_modules文件夹、package-lock.json或yarn.lock文件，重新执行npm install或yarn install安装依赖。

3. 调整BizCharts版本兼容性 #

你当前使用的bizcharts@4.1.14对React 17的兼容存在已知问题，可以尝试降级到适配React 17的稳定版本：

npm install bizcharts@4.1.11
# 或者yarn add bizcharts@4.1.11

4. 临时兜底方案 #

如果上述方案都无法解决，可以通过异步导入组件规避冲突：
修改你引入Biz组件的位置代码：

import React, { Suspense } from 'react';
const Biz = React.lazy(() => import('./Biz')); // 替换成你的Biz组件实际路径

// 渲染处使用
function App() {
  return (
    <div>
      <Suspense fallback={<div>图表加载中...</div>}>
        <Biz />
      </Suspense>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Zohair Ahmed