react如何獲取state的值並更新使用
react獲取state值並更新使用
react獲取state的值並且修改分為兩種情況：
在視圖層處理
//在 state 中飯設置初始值
state={
name:'',
age:''
}
//通過 控制一個事件觸發然後setState 去設置
setName=()=>{
this.setState({
name
})
}
在model層處理
view層
//前端通過dispatch 去調用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調用不同接口
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
};
}
}
react中state基本使用
有狀態組件和無狀態組件
- 函數組件又叫做 無狀態組件，類組件又叫做 有狀態組件
- 狀態( state )即 數據
- 函數組件沒有自己的狀態，隻負責數據展示(靜)
- 類組件有自己的狀態，負責更新Ul，讓頁面“動”起來
比如計數器案例中，點擊按鈕讓數值加1。0和1就是不同時刻的狀態，而由0變為1就表示狀態發生瞭變化。狀態變化後，UI也要相應的更新。React中想要實現該功能，就要使用有狀態組件來完成。
state的基本使用
- 狀態( state )即數據，是組件內部的私有數據，隻能在組件內部使用
- state的值是對象，表示一個組件中可以有多個數據
- 通過 this.state 來獲取狀態
class App extends React.Component {
// constructor() {
// super()
// // 初始化state
// this.state = {
// count: 0
// }
// }
// 簡化語法初始化state 【推薦】
state = {
count: 0,
}
render() {
return(
<div>
<h1>計數器：{this.state.count}</h1>
</div>
)
}
}
// 渲染組件
ReactDOM.render(<App />, document.getElementById("root"))
setState修改狀態
- 狀態是可變的
- 語法：this.setState({ 要修改的數據 })
- 註意：不要直接修改 state 中的值，這是錯誤的！！！
- setState() 作用：1. 修改state 2. 更新UI
- 思想：數據驅動視圖
class App extends React.Component {
// 簡化語法初始化state 【推薦】
state = {
count: 0,
}
render() {
return(
<div>
<h1>計數器：{this.state.count}</h1>
<button onClick = {() => {
this.setState({
count: this.state.count + 1
})
}}>+1</button>
</div>
)
}
}
// 渲染組件
ReactDOM.render(<App />, document.getElementById("root"))
從JSX中抽離事件處理程序
- JSX中摻雜過多JS邏輯代碼，會顯得非常混亂
- 推薦：將邏輯抽離到單獨的方法中，保證JSX結構清晰
- 原因：事件處理程序中 this的值為undefined
- 希望：this 指向組件實例( render方法中的this即為組件實例)
事件綁定this指向
1. 箭頭函數
- 利用箭頭函數自身不綁定 this 的特點
- render() 方法中的 this 為組件實例，可以獲取到 setState()
2. Function.prototype.bind()
利用 ES5 中的 bind() 方法，將事件處理程序中的 this 與組件實例綁定到一起
class App extends React.Component {
constructor() {
super()
this.state = {
count: 0,
}
this.onIncrement = this.onIncrement.bind(this)
}
// 事件處理程序
onIncrement() {
console.log('事件處理程序中的this：', this)
this.setState({
count: this.state.count + 1
})
}
render() {
return(
<div>
<h1>計數器：{this.state.count}</h1>
<button onClick = { this.onIncrement }>+1</button>
</div>
)
}
}
// 渲染組件
ReactDOM.render(<App />, document.getElementById("root"))
3. class的實例方法
- 利用 箭頭函數 形式的 class實例 方法
- 註意∶該語法是實驗性語法，但是，由於 babel 的存在可以直接使用
class App extends React.Component {
state = {
count: 0,
}
// 事件處理程序
onIncrement = ()=> {
console.log('事件處理程序中的this：', this)
this.setState({
count: this.state.count + 1
})
}
render() {
return(
<div>
<h1>計數器：{this.state.count}</h1>
<button onClick = { this.onIncrement }>+1</button>
</div>
)
}
}
// 渲染組件
ReactDOM.render(<App />, document.getElementById("root"))
以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。