相信大家在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 中文文档

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐