React：踩坑记

持续更新中。。。。。。

组件销毁坑

报错信息

问题描述.PNG

需求是点击左上角的关闭按钮，注销本次的登录信息，结果出现以下报错信息

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异步坑

问题描述

setState坑.PNG setState坑2.PNG

需求是点击第一幅图的表格中选中行，然后点击详情页面按钮，会打开一个新的窗口，并将在第一幅图选中的信息展示在新窗口中（第二幅图）。

选中的信息会首先通过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会出现红色的下划线。运行项目后浏览器会出现报错信息

解决方法

安装插件消除报错

1. 需要安装 @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，将如图选项打钩即可。

去除VScode装饰器红色下划线.png