react获取state的值并更新使用
生活随笔
收集整理的這篇文章主要介紹了
react获取state的值并更新使用
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
react獲取state的值并且修改分為兩種情況:
在視圖層處理:
//在 state 中飯?jiān)O(shè)置初始值 state={name:'',age:''}//通過 控制一個(gè)事件觸發(fā)然后setState 去設(shè)置 setName=()=>{this.setState({name}) }在model層處理:
view層
//前端通過dispatch 去調(diào)用changeTab 接口onTabsChange = (key) => { this.props.dispatch({type: `${this.module}/changeTab`, payload: key});}model層:
const moduleName = 'mayouchen'; let defaultState = {activeTabKey: "1" }; export default {namespace: moduleName,state: {moduleName: moduleName,defaultState,...defaultState }, effects: {* changeTab({ payload, }, { call, put, select }) { // 更新 activeTabKey yield put({type:'updateActiveTabKey',payload}); // 更新完 activeTabKey 就可以使用 activeTabKey 更新后的值yield put({type: 'getDataByTab'});},* getDataByTab({payload }, { call, put, select }) { let { activeTabKey } = yield select(state => state[moduleName]);//切換TAB調(diào)用不同接口if(activeTabKey == "1") { //商戶信息yield put({type:'businessInformation', payload: {}});} else if (activeTabKey == "2" ) { //審批信息yield put({type:'approvalInformation', payload: {}})}else if (activeTabKey == "3" ) {}}, * businessInformation ({payload, }, { call, put, select }) {const result = yield call(read, payload);if (result ) {let { data } = result ;yield put({ type: 'getBusinessInformationData', payload: {...data }});}else {message.error(`獲取信息失敗:${entityRes.globalError}`);}} }reducers: {updateActiveTabKey(state, action) {return {...state,activeTabKey: action.payload};} } 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯,堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的react获取state的值并更新使用的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 数据可视化之 图表篇(七)柱形图
- 下一篇: O2O的理解