共计 1121 个字符,预计需要花费 3 分钟才能阅读完成。
场景:比方列表项呈现编辑或者新增业务时,接口设计的数据结构往往须要许多数据,这时候须要一套能保护这些变量的数据结构,并且好用,好批改变量。
处于编辑状态时,当用户批改了局部信息勾销之后,根本信息要回退到批改前的版本
这里次要用到 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});
正文完