`
222xiaohuan
  • 浏览: 53260 次
  • 性别: Icon_minigender_2
  • 来自: 苏州
社区版块
存档分类
最新评论

防止数据发返回时组件不存在(unmount)

 
阅读更多

1,  componentDidMount() {

    this.mounted = true;

  }

 

2,   componentWillUnmount() {

    this.mounted = false;

  }

 

3,fetchThisWeekData() {

    const params = {};

    params.flag = 0;

    Request.GET(API.getEmployeeAttendanceData(params), (responseData) => {

      if (!this.mounted) return;

      this.thisWeek = responseData;

      // console.log('thisweek----', this.thisWeek);

      // this.thisWeek = [[2, 2, 6], [3, 6, 2], [1, 0, 4], [0, 4, 6], [3, 6, 0], [0, 0, 0], [4, 4, 4]];

      if (Util.isAndroid) {

        this.setState({

          data: {

            datasets: [{

              yValues: this.thisWeek,

              label: '',

              config: {

                barSpacePercent: 60,

                colors: ['#56e295', '#617fde', '#f9bf13'],

                stackLabels: [`${I18n.t('regularHours')}`, `${I18n.t('overtime')}`, `${I18n.t('leave')}`],

                valueTextColor: 'white',

                valueTextFontSize: 6,

              },

            }],

            xValues: [`${I18n.t('monday')}`, `${I18n.t('tuesday')}`, `${I18n.t('wednesday')}`, `${I18n.t('thurday')}`, `${I18n.t('friday')}`, `${I18n.t('saturday')}`, `${I18n.t('sunday')}`],

          },

          loaded: true,

        });

      }

      if (Util.isIos) {

        this.state.config.dataSets[0].values = this.thisWeek;

        this.setState({

          config: this.state.config,

          loaded: true,

        });

      }

    }, (message) => {

      if (!this.mounted) return;

      Message.showMessage('error', message);

    });

  }

分享到:
评论

相关推荐

    Android 下通过反射调用加载/卸载(mount/unmount) 外置SD卡

    在Android系统中,外置SD卡的加载与卸载通常由系统服务自动处理,但有时开发者可能需要在特定场景下进行手动操作,例如在应用程序中实现数据备份或系统优化功能。这种情况下,可以通过反射调用来执行加载(mount)和...

    Database Mount and Unmount

    数据库挂载与卸载是数据库管理中的重要操作之一,尤其在需要进行数据迁移、备份或恢复时更为关键。本文将围绕Sybase ASE数据库的挂载与卸载功能展开详细介绍,并深入探讨其中涉及的关键概念和技术细节。 #### ...

    卸载组件时,React Hook取消promise-JavaScript开发

    use-unmount-signal useUnmountSignal是一个React Hook,用于在卸载组件时取消承诺。 它使用W3C标准的AbortSignal API来通知use-unmount-signal useUnmountSignal是一个React Hook,用于在卸载组件时取消承诺。 当...

    WEB-面试题-第五阶段2022

    子与父通信是通过属性传递有参数的方法,让子组件调用时传值,例如:①定义有参数的方法 rcvMsg(msg){}②传递给子组件 <son funcRcv={this.rcvMsg}></son>③子组件来调用 This.props.funcRcv(123) 3.如何在组件渲染...

    riot, 简单而优雅的基于组件的UI库.zip

    6. 生命周期钩子(Lifecycle Hooks):类似于其他框架的生命周期函数,如`mount`、`update`和`unmount`,用于在组件创建、更新和销毁时执行特定操作。 使用Riot.js开发时,可以享受到以下优势: - **简单学习曲线*...

    十分钟带你快速了解React16新特性

    之前,一旦某个组件发生错误,整个组件树将会从根节点被unmount下来。React 16修复了这一点,引入了Error Boundary的概念,中文译为“错误边界”,当某个组件发生错误时,我们可以通过Error Boundary捕获到错误并对...

    react的经典面试题

    Render Props组件通过提供一个prop(通常是名为`render`的prop),该prop是一个函数,可以接收一些数据并返回需要渲染的React元素。 #### 1.5 `useContext`的作用 `useContext`是一个React Hook,用于在组件之间...

    reactor宝典.doc

    5. **组件返回值**:React 18现在支持组件返回`null`和`undefined`,这为开发者提供了更多灵活性,尤其是在处理动态渲染逻辑时。 6. **Strict Mode更新**:React 18中,严格模式下的二次渲染日志变得更加简洁,使得...

    数据存储1

    在Android开发中,数据存储是不可或缺的一部分,它涵盖了多种方式,包括SharePreference、文件系统、SQLite数据库以及ContentProvider。下面将详细阐述这些数据存储方法及其使用。 1. SharePreference: ...

    riot-testing-library:简单而完整的Riot测试实用程序,鼓励良好的测试实践

    render({container, target, ...componentOptions}) => { container, unmount, rerender } :渲染方法来安装包含自定义钩子的组件 container :组件安装到其中HTML元素。 默认值: document.body target :组件已...

    use-unmount-ref

    yarn add @technote-space/use-unmount-ref 或者 npm i @technote-space/use-unmount-ref 用 例如 import type { FC } from 'react' ; import { useEffect , useState } from 'react' ; import useUnmountRef from...

    vue和js面试题整理

    - Vue实例化时,data作为配置项传入,如果是函数则返回其值,对象则直接使用,并且创建data的响应式引用,使vm.$options.data和vm._data保持一致。 以上就是关于Vue和JavaScript面试题的一些关键知识点,涵盖了Vue...

    reactnativerouterflux路由组件使用方式Demo

    有些场景可能需要根据特定条件显示或隐藏,可以利用`hide`或`unmount`属性: ```jsx ``` 5. **处理生命周期事件** 场景组件可以监听`onEnter`,`onLeave`等生命周期事件,以执行相应的逻辑。 6. **错误处理*...

    前端面试题目整理更新,vue、js等

    - **Unmount**:Vue3新增了`unmount`方法,允许卸载页面或组件。 - **根标签**:Vue3不再强制要求根组件有唯一的`<div>`标签。 - **兼容性**:Vue3与Vue2部分API兼容,但Vue3的数据和方法无法直接在Vue2中访问,...

    android SD卡存储数据

    ### Android SD卡存储数据 #### 知识点一:Android应用权限管理 在Android系统中,应用程序如果想要访问外部存储(如SD卡)必须在`AndroidManifest.xml`文件中声明相应的权限。对于写入外部存储的操作,需要声明...

    Android异步加载数据和图片的保存思路详解

    读取网络数据时,使用InputStream和OutputStream进行文件的读写操作。在读取完成后,返回本地Uri以便在主线程中通过Handler更新UI。 在主线程的Handler中,接收到图片Uri后,调用ImageView的`setImageUri()`方法...

    react-mount-animation:使用非常清晰易用的语法在安装和卸载React组件时,就像从CSS(使用关键帧)那样添加动画

    使用react-mount-animation :person_running_medium_skin_tone:‍:person_running_medium_skin_tone:轻松进行React React的安装/卸载动画 :rocket:使用非常清晰易用的语法在安装和卸载React组件时,就像从CSS(使用...

    愉客行数据服务.apk 分析报告1

    - 装载和卸载文件系统:android.permission.MOUNT_UNMOUNT_FILESYSTEMS,允许对可移动存储进行安装和卸载操作,这通常是高级权限,一般应用不常需要。 3. **安全风险**: - 申请的权限中,读写外部存储和请求...

    WimTool(wim文件处理小工具)

    其中参数 "/Yes" 表示不确认目标目录是否存在文件而直接解开映像(解开的文件有可能覆盖已存在的文件),省略该参数时, 若目标目录已存在文件则要用户确认才执行解开映像操作。其中映像文件可以是分包文件。 ②....

Global site tag (gtag.js) - Google Analytics