这篇文章主要介绍“react怎么获取state的值并更新使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“react怎么获取state的值并更新使用”文章能帮助大家解决问题。
react获取state的值并且修改分为两种情况：
计算
安全
数据库
网络和加速
企业服务
//在 state 中饭设置初始值
state={
name:'',
age:''
}
//通过 控制一个事件触发然后setState 去设置
setName=()=>{
this.setState({
name
})
}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
};
}
}函数组件又叫做 无状态组件，类组件又叫做 有状态组件
状态( state )即 数据
函数组件没有自己的状态，只负责数据展示(静)
类组件有自己的状态，负责更新Ul，让页面“动”起来
比如计数器案例中，点击按钮让数值加1。0和1就是不同时刻的状态，而由0变为1就表示状态发生了变化。状态变化后，UI也要相应的更新。React中想要实现该功能，就要使用有状态组件来完成。
状态( state )即数据，是组件内部的私有数据，只能在组件内部使用
state的值是对象，表示一个组件中可以有多个数据
通过 this.state 来获取状态
class App extends React.Component {
// constructor() {
// super()
// // 初始化state
// this.state = {
// count: 0
// }
// }
// 简化语法初始化state 【推荐】
state = {
count: 0,
}
render() {
return(
<div>
<h2>计数器：{this.state.count}</h2>
</div>
)
}
}
// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))状态是可变的
语法：this.setState({ 要修改的数据 })
注意：不要直接修改 state 中的值，这是错误的！！！
setState() 作用：1. 修改state 2. 更新UI
思想：数据驱动视图
class App extends React.Component {
// 简化语法初始化state 【推荐】
state = {
count: 0,
}
render() {
return(
<div>
<h2>计数器：{this.state.count}</h2>
<button onClick = {() => {
this.setState({
count: this.state.count + 1
})
}}>+1</button>
</div>
)
}
}
// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))JSX中掺杂过多JS逻辑代码，会显得非常混乱
推荐：将逻辑抽离到单独的方法中，保证JSX结构清晰
原因：事件处理程序中 this的值为undefined
希望：this 指向组件实例( render方法中的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>
<h2>计数器：{this.state.count}</h2>
<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>
<h2>计数器：{this.state.count}</h2>
<button onClick = { this.onIncrement }>+1</button>
</div>
)
}
}
// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))关于“react怎么获取state的值并更新使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
