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

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

这里次要用到 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类字段申请的数据初始化给stateuseEffect(()=>{  cancelState.current = deepCopy(detailData);  dispath({type:'all',data:detailData});},[detailDate]); // 赋值// 当根本信息被批改的时候，间接应用dispatch办法批改dispatch({type:'varA',data:value});// 因为界面中只保护了一套构造，当用户批改了局部，放弃批改勾销时，须要对变量进行回退。dispath({type:'all',data:cancelState.current});