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 本质上是没有变化 但是我们依旧判断为变化了

相关推荐
qq_3643717228 分钟前
Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
前端·vue.js·缓存
y先森1 小时前
CSS3中的弹性布局之侧轴的对齐方式
前端·css·css3
new出一个对象5 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥6 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森6 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy6 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189116 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿8 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡9 小时前
commitlint校验git提交信息
前端
虾球xz9 小时前
游戏引擎学习第20天
前端·学习·游戏引擎