react 判断整个表单/state数据是否有变化 从而实施不同的操作逻辑解决方案【潦草版】

产品说需要判断整个表单的数据 如果只有某两个值变化不会走这个逻辑,其他值变化了那就需要走这个逻辑
如果使用的antd 的from ,可以直接进行整个表单的数据监听onchange,判断这个key 是否是排除之外的值 如果不是则给haschange 打上标记

但是这次 他没有使用 antd 的 form 组件 全局使用类组件进行,

我们可以重写setState 方式,只要他调用我们的setState参数 则 进行haschange打标记

js 复制代码
     // 重写setState 方法在我们的构造函数生命周期中
     const that  = this as any;
      // 保存原生的setState引用
      that._setState = this.setState.bind(this);
      // 自定义setState方法以追踪变化
      this.setState = (newState, callback) => {
        // 深比较新旧状态,找出变化的key
        const keysChanged = Object.keys(newState).filter(key => newState[key] !== this.state[key]);
        if(!this.isFirst){
        /* 如果除了竟媒信息/名称发生改变则需要给予提示信息 */
        const filterList = keysChanged?.filter(item=>(item!=='xxx' && item!=='xxx' && item!=='xxx'))
        if(filterList?.length>0){
          this.hasChanged = true
        }
        }
  
        // 调用原始的setState方法更新状态
        that._setState(newState, () => {
          if (callback) {
            callback();
          }
          // 这里可以添加更多基于状态变化的操作
        });
      };
js 复制代码
	// 在 componentdidiUpdate 中判断 当前页面state 数据是否已经稳定
    /* 某个最后一次更新的数据 xxxxx 目前是最后一个更新的 判断数据是否已稳定 稳定则不再执行 开启监听state变化  */
    if(this.isFirst){
      const isEqual = checkJonsEqual(prevState,this.state,['xxxx'])
      if(isEqual){
        this.isFirst = false
      }
    }
js 复制代码
/**
 * 
 * @param preJson json1
 * @param nextJson json2
 * @param exceptList 排除的字段
 */
export const checkJonsEqual = (preJson, nextJson, exceptList = []) => {
    const preJsonObj = _.cloneDeep(preJson);
    const nextJsonObj = _.cloneDeep(nextJson);
    for (let i = 0; i < exceptList.length; i++) {
        delete preJsonObj[exceptList[i]];
        delete nextJsonObj[exceptList[i]];
    }
    return _.isEqual(JSON.stringify(preJsonObj), JSON.stringify(nextJsonObj));
}

这个只是粗略的监听 并没有实质性监听某个值真的是否发生变化

比如从 1 => 0 又从 0 =>1 本质上是没有变化 但是我们依旧判断为变化了

相关推荐
耶啵奶膘6 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf4 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据4 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
334554325 小时前
element动态表头合并表格
开发语言·javascript·ecmascript