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

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,将如图选项打钩即可。