Invalid hook call. Hooks can only be called inside of the body of a function

相信大家在react中都遇到过这个错误

 然后就开始百度发现试了各种方式都无果，这个错误大致的意思是说非法使用了hooks，可以先试一下react官网的这些解决方式如果还是不行那看一下我踩的这个坑。

警告：非法 Hook 调用 – React

---

我是要在react中使用bizcharts

Bizcharts - 基于商业场景下的数据可视化解决方案

按照官网步骤，首先安装bizcharts

npm i bizcharts -S

然后选择你想要的图表将代码复制粘贴到你要展示的结构中

import { Chart, Interval } from 'bizcharts';
import './App.css';


function App() {
  // 数据源
  const data = [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 155 },
    { genre: 'Action', sold: 230 },
    { genre: 'Shooter', sold: 250 },
    { genre: 'Other', sold: 450 }
  ];
 
  return (
    <div className="App">
      <Chart height={320} autoFit data={data} >
        <Interval position="genre*sold" />
      </Chart>
    </div>
  );
}

export default App;

然后满心欢喜的打开浏览器看看效果，好家伙一片空白，控制台还报错了，报的就是上面那个错，

我就一脸疑问？？？因为在此之前我还使用过echarts，是没有问题的，然后我就打开echarts试了一下，一样的错.....

---

然后我就查看了一下目录文件所有的react版本

npm ls react

发现bizcharts引用的react是16版本，而其他都是17版本，那就肯定有问题了，可是为啥呢？

想起来用的是npm去安装的 之前就被npm坑过几次，npm很容易出现依赖包的各种冲突问题，

然后我就卸载了bizcharts

npm uninstall bizcharts

然后使用yarn安装

yarn add bizcharts -S

 然后发现一切都好了！

再次查看react版本

npm ls react

版本号确实都统一了 

---

 总结：

真的踩了好几次npm的坑，所以尽量少使用npm，可以看看yarn和pnpm.

Yarn 中文文档