react如何获取state的值并更新使用.docxVIP

第

react如何获取state的值并更新使用

目录react获取state值并更新使用在视图层处理在model层处理react中state基本使用有状态组件和无状态组件state的基本使用setState修改状态从JSX中抽离事件处理程序事件绑定this指向

react获取state值并更新使用

react获取state的值并且修改分为两种情况：

在视图层处理

//在state中饭设置初始值

state={

???name:,

???age:

//通过控制一个事件触发然后setState去设置

setName=()={

??this.setState({

????name

??})

}

在model层处理

view层

?//前端通过dispatch去调用changeTab接口

?onTabsChange=(key)={?

??ps.dispatch({

???type:`${this.module}/changeTab`,?

???payload:key

??});

?}

model层：

constmoduleName=mayouchen;

letdefaultState={

?activeTabKey:1

exportdefault{

?namespace:moduleName,

?state:{

??moduleName:moduleName,

??defaultState,

??...defaultState

effects:{

?*changeTab({payload,},{call,put,select}){?

????//更新?activeTabKey?

????yieldput({

?????type:updateActiveTabKey,

?????payload

????});?

???//更新完?activeTabKey?就可以使用?activeTabKey更新后的值

????yieldput({type:getDataByTab});

?*getDataByTab({payload},{call,put,select}){?

????let{activeTabKey}=yieldselect(state=state[moduleName]);

????//切换TAB调用不同接口

????if(activeTabKey==1){?//商户信息

?????yieldput({type:businessInformation,payload:{}});

????}elseif(activeTabKey==2){?//审批信息

?????yieldput({type:approvalInformation,payload:{}})

????}elseif(activeTabKey==3){

????}

??},?

??*businessInformation({payload,},{call,put,select}){

???constresult=yieldcall(read,payload);

???if(result){

????let{data}=result;

????yieldput({type:getBusinessInformationData,payload:{...data}});

???}

???else{

????message.error(`获取信息失败：${entityRes.globalError}`);

???}

?reducers:{

???updateActiveTabKey(state,action){

???return{

????...state,

????activeTabKey:action.payload

???};

??}

}

react中state基本使用

有状态组件和无状态组件

函数组件又叫做无状态组件，类组件又叫做有状态组件状态(state)即数据函数组件没有自己的状态，只负责数据展示(静)类组件有自己的状态，负责更新Ul，让页面动起来

比如计数器案例中，点击按钮让数值