• React hook 自动刷新dom实现电子表(踩坑)


     

    直接进入中心内容(重点): settimeOut和setInterval的函数无法获取外层setState值的问题(闭包,无法以及匿名函数获取到外面的值 )

    记得以前没用箭头函数和 hook的时候一般会把this 指定程_this, 但是hook和匿名函数 没有this,所以需要另外解决

    解决方案1:使用 ref   来 代理一层 就能获取到,ref的current是一个能实时变化的全局变量,函数里面 setState就行了

    import React, { useEffect, useRef, useState } from 'react';
    import dayjs from 'dayjs';
    
    const weeks: Record = {
      0: '星期天',
      1: '星期一',
      2: '星期二',
      3: '星期三',
      4: '星期四',
      5: '星期五',
      6: '星期六',
    };
    const Timer = () => {
      const [curTime, setCurTime] = useState(dayjs().valueOf());
      // console.log('getCurTime', curTime);
      const timeRef: any = useRef();
    
      const getDate = () => {
        if (!curTime) {
          return {
            day: '',
            hour: '',
            week: '',
          };
        }
        const day = dayjs(curTime).format('YYYY/MM/DD');
        const hour = dayjs(curTime).format('hh:mm:ss');
        const week = weeks[dayjs(curTime).day()];
        return {
          day,
          hour,
          week,
        };
      };
    
      const callback = () => {
        setCurTime(dayjs().valueOf());
      };
      useEffect(() => {
        timeRef.current = callback;
        const timer = setInterval(() => {
          timeRef.current();
        }, 1000);
        return () => {
          clearInterval(timer);
        };
      }, []);
    
      return (
        
    {getDate().hour}
    {getDate().day}
    {getDate().week}
    ); }; export default Timer;

    解决方案二:两个setState 配合useEffect ,第一个 setState来控制 useEffect的依赖值,因为setInterval里面的第一个setState每次都会变化,所以每隔1S都会触发useEffect,然后在useEffect里面来更新 我们dom上面 需要用到的值就行了

    代码:

    import React, { useEffect, useRef, useState } from 'react';
    import dayjs from 'dayjs';
    
    const weeks: Record = {
      0: '星期天',
      1: '星期一',
      2: '星期二',
      3: '星期三',
      4: '星期四',
      5: '星期五',
      6: '星期六',
    };
    const Timer = () => {
      const [curTime, setCurTime] = useState(dayjs().valueOf());
      const [newValue, setNewValue] = useState(0);
    
      const getDate = () => {
        if (!curTime) {
          return {
            day: '',
            hour: '',
            week: '',
          };
        }
        const day = dayjs(curTime).format('YYYY/MM/DD');
        const hour = dayjs(curTime).format('hh:mm:ss');
        const week = weeks[dayjs(curTime).day()];
        return {
          day,
          hour,
          week,
        };
      };
    
      useEffect(() => {
        setCurTime(dayjs().valueOf());
        const timer = setTimeout(() => {
          setNewValue(newValue + 1);
        }, 1000);
        return () => {
          clearTimeout(timer);
        };
      }, [newValue]);
    
      return (
        
    {getDate().hour}
    {getDate().day}
    {getDate().week}
    ); }; export default Timer;

    ps: 我这里推荐使用第一种ref的方式,而且用class组件就不会有这种情况出现,这种问题是react-hook中的闭包问题
  • 相关阅读:
    启山智软商城源码新官网震撼上线
    android期末复习
    城市-上市公司数字经济数据(2011-2019年)
    【MQTT】基于阿里云物联网平台实现两设备间相互订阅及发布消息
    【MATLAB】史上最全的7种回归预测算法全家桶
    安装lrzsz
    input 的 placeholder 样式
    10年老码农亲授:什么是分布式系统
    【译】.NET 7 中的性能改进(八)
    17.Redis系列之快照RDB方式持久化
  • 原文地址:https://blog.csdn.net/wangshang1320/article/details/127553952