React中使用Ant Design组件库报错 invalid hook call && 组件无法正常显示

一、使用Ant Design 的组件报错

Uncaught Error:invalid hook call . Hooks can only be called inside of the body of a function component .This could happen for one of the following resons:
react.developement.js :1465

二、解决方法

1. 根据报错信息：无效的 钩子函数（生命周期函数）调用。生命周期函数只能在一个组件中被调用，错误的原因可能是：
   1）react和react的依赖包（例如：React Dom)版本不匹配
   2) 生命周期函数不符合使用规则
   3）在一个 react应用中 引入了多个React
   哇：1)查看官网版本即可；2）不知道从何下手；3）检查后没有该情况。

   可以先检查一下自己的标签的书写位置是否正确
   1)Ant Design组件库的使用方式如下：
   以DatePicker(日期选择框)为例
   a.安装Ant Design
   npm install antd -S
   b.导入需要的组件
   import {DatePicker} from ‘antd’
   c.以标签的形式在 ReactDOM.render 、组件的return 部分 使用
   

					import React from "react"; //创建组件的依赖包
					import ReactDOM from "react-dom"; //渲染组件的依赖包
					import {DatePicker} from "antd"; //导入日期组件
					import "antd/dist/antd.css"; //导入Ant Design的样式
					
					ReactDOM.render(
					  <div >
					    <DatePicker />
					  </div>,
					  document.getElementById("app") //html文件中的div
					);

2.如果代码书写方面,没有问题。请检查 antd包是否安装正确。
1)检查方法：查看 package.json文件中的 dependencies属性
如果有 “antd”: “版本号” 则表示安装正确
否则：请重新运行命令 npm install antd -S重新安装
2）我的问题就是出在这里,一开始装包时只有警告，没有注意，结果花了很长时间研究报错提出的三条建议。那三条建议可以解决某些问题,但是检查自己的包是否安装正确应该放在首位。

3.如果还有问题，请移步其它博客

三、总结

1. 本文主要是提供解决bug的步骤：检查是否正确使用——检查是否正确安装相关的包——根据错误提示进行处理
2. 如果不遵循上述步骤，直接根据错误提示搜索解决方案很有可能花费很长时间都不能解决问题(亲身体验)
3. 解决问题的顺序很重要，就如同某一粒纽扣系错了，就别指望剩下的能够系正确。
4. 装包的时候建议保持网络环境良好。
   如果有警告信息，建议留意一下，会避免一些不必要的麻烦

希望能给你提供帮助。如有错误，欢迎指正