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

光头程序员2024-08-19 12:08

产品说需要判断整个表单的数据如果只有某两个值变化不会走这个逻辑，其他值变化了那就需要走这个逻辑
如果使用的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 本质上是没有变化但是我们依旧判断为变化了

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

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