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

更新时间：2022年08月08日 10:13:15 作者：马优晨

这篇文章主要介绍了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"))

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

关于react ant 组件 Select下拉框值回显的问题
这篇文章主要介绍了关于react ant 组件 Select下拉框值回显的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
React组件二次包装的具体实现
本文主要介绍了React组件二次包装的具体实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
React合成事件及Test Utilities在Facebook内部进行测试
这篇文章主要介绍了React合成事件及Test Utilities在Facebook内部进行测试，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
详解React如何优雅地根据prop更新state值
这篇文章主要为大家详细介绍了React如何优雅地实现根据prop更新state值,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴可以了解下
2023-11-11
React使用hook如何实现数据双向绑定
这篇文章主要介绍了React使用hook如何实现数据双向绑定方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
React中refs的一些常见用法汇总
Refs是一个获取 DOM节点或React元素实例的工具,在React中Refs 提供了一种方式,允许用户访问DOM 节点或者在render方法中创建的React元素,这篇文章主要给大家介绍了关于React中refs的一些常见用法,需要的朋友可以参考下
2021-07-07
react hooks闭包陷阱切入浅谈
这篇文章主要介绍了从react hooks闭包陷阱切入浅谈react hooks，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
详解使用React全家桶搭建一个后台管理系统
本篇文章主要介绍了使用React全家桶搭建一个后台管理系统，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
react-navigation之动态修改title的内容
这篇文章主要介绍了react-navigation之动态修改title的内容，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
React中props使用介绍
props是组件（包括函数组件和class组件）间的内置属性，用其可以传递数据给子节点，props用来传递参数。组件实例化过程中，你可以向其中传递一个参数，这个参数会在实例化过程中被引用
2022-12-12