关于前端:新增编辑类复杂场景变量维护

场景：比方列表项呈现编辑或者新增业务时，接口设计的数据结构往往须要许多数据，这时候须要一套能保护这些变量的数据结构，并且好用，好批改变量。
处于编辑状态时，当用户批改了局部信息勾销之后，根本信息要回退到批改前的版本

这里次要用到 useReducer,useRef

咱们须要创立一个 useREducer.ts 文件专门用来解决构造批改的业务

//  定义接口
export interface IBaseInfo{
  varA:string;
  varB:string;
  ...,
}
 
interface IBaseInfoReducer{
 type: 'varA' | 'varB' | .... | 'all';
 data?:any;
}
 
// 初始化数据结构值
export const initBaseInfo={
  varA:'',
  varB:'',
  ...,
}
 
// 批改
export const BaseInfoReducer = (state:IBaseInfo,action:IBaseInfoReducer):IBaseInfo =>{
  const data = action.data;
  switch(action.type){
     case :'varA':
          return {...state,varA:data};
     case :'varA':
          return {...state,varA:data};
     ....,
     case :'all':
          return {...state,...data};
      default:
          return state;
  }
}

在 tsx 文件中，咱们定义一下根底变量进行操作：
从 useReducer.ts 文件中引入 BaseInfoReducer,initBaseInfo
定义 state 变量

const [state,dispatch] = useReducer(BaseInfoReducer,initBaseInfo);
const cancelState = useRef<any>({}); // 用于记录初始值，不便回退
// 当编辑页面是，页面初始化后须要把传入的数据或者是通过 id 类字段申请的数据初始化给 state
useEffect(()=>{cancelState.current = deepCopy(detailData);
  dispath({type:'all',data:detailData});
},[detailDate]); // 赋值
 
// 当根本信息被批改的时候，间接应用 dispatch 办法批改
dispatch({type:'varA',data:value});
 
// 因为界面中只保护了一套构造，当用户批改了局部，放弃批改勾销时，须要对变量进行回退。dispath({type:'all',data:cancelState.current});