持续更新中。。。。。。
组件销毁坑
报错信息
需求是点击左上角的关闭按钮，注销本次的登录信息，结果出现以下报错信息
Can't perform a React state update on an unmounted component
大致意思就是：不能在组件销毁后设置state，防止出现内存泄漏的情况。
问题分析
出现以上情况是因为：该组件（header）中设置了一个定时器，并将该定时器通过setState绑定到了state中。而header组件中的时间显示依赖于state。因此只要定时器存在，就会一直更新组件的state。当销毁组件的时候，state仍然因为定时器的存在在不停的更新，React为了防止内存泄漏，会阻止注销操作并报错。
解决方法
应该在组件销毁之前清除所有的定时器（以及异步方法），具体实现是在componentWillUnmount中进行
componentWillUnmount() {
clearTimeout(this.timer);
this.setState = (state,callback) => {
return ;
}
}
setState异步坑
问题描述
需求是点击第一幅图的表格中选中行，然后点击详情页面按钮，会打开一个新的窗口，并将在第一幅图选中的信息展示在新窗口中（第二幅图）。
选中的信息会首先通过state存进redux中，该state值已通过sessionStorage本地存储进浏览器，防止页面刷新导致redux中存储的state值初始化。
结果信息并未准确传递过来，而是显示的上一个state值（即上一次点击选中的行信息）。
问题分析
出现该问题是因为：点击某一行时，先是在onRow的onClick回调函数中，通过this.setState将该行信息写进组件的state中，然后通过dispatch将state值存入redux中，但是因为this.setState是异步的，导致state未更新完就dispatch了，因此打开的新页面显示的是上次的状态值
解决方法
setState本身在第二个参数中提供过了回调方法，当state值更新完毕后，会调用第二个参数。因此可以设置第二个参数，做到把异步变同步
// 选择栏刷新状态 onRow中的onClick定义的是onRowClick
onRowClick = (record, key) => {
let selectKey = [key];
this.setState({
selectedRowKeys: selectKey,
selectedItem: record,
},() => this.props.orderShow(this.state.selectedItem))
}
装饰器报错坑
问题描述
使用最新的create-react-app脚手架生成的项目，使用装饰器时，VSCode会出现红色的下划线。运行项目后浏览器会出现报错信息
解决方法
安装插件消除报错
- 需要安装 @babel/plugin-proposal-decorators
npm install @babel/plugin-proposal-decorators --save --dev
2.添加babel配置
"babel": {
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
],
"presets": [
"react-app"
]
},
更改VSCode设置去除红色下划线
在编辑器中左下角找到齿轮按钮，点击按钮找到，找到设置。在编辑界面输入experimental decorators，将如图选项打钩即可。
