解决react setState延迟执行

    技术2026-02-16  15

    react setState延迟执行不立即更新总结

    this.setState((prevState,props))

    1.语法:setState()可以接收一个函数,这个函数接受两个参数,第一个参数表示上一个状态值,第二个参数表示当前的props。

    2.setState()方法更类似一种请求而非一种立即更新组件的强制性命令, 为了更好地性能与某些情况(比如正在输入文本框页面因为来一条消息直接将文本框内容重新渲染了) React会延迟调用它,不会保证state的变更会即刻执行,而是会批量推迟更新。

    3.何时同步何时异步: ①由react控制的事件处理程序,生命周期函数调用setState不会同步更新state。 ②鼠标事件、键盘事件、表单事件、窗口事件、触摸事件中react封装绑定的事件中的setState({"":""})都是异步处理的。

    4解决办法。 ①this.setState((prevState,props)) ②在函数中直接调用回调函数,this.setState({“name”:0},()=>{console.log(this.state.name)}) ③改成全局变量

    举个栗子

    import React from 'react'; class NavigaBtn extends React.Component { constructor(props) { super(props); this.toleftcc = this.toleftcc.bind(this); this.torightcc = this.torightcc.bind(this); this.state = { "ncindex": 0,"isToggleOn":false, "fuserinfo": [["内容0"], ["内容1"], ["内容2"], ["内容3"], ["内容4"]] } } toleftcc=()=> { if (this.state.ncindex <= 0) { //及时更新 this.setState((props)=>({"ncindex":4})) } else { this.setState((props)=>({"ncindex":this.state.ncindex - 1})) } } torightcc=()=> { if (this.state.ncindex >= 4) { this.setState((props)=>({"ncindex":0})) } else { this.setState((props)=>({"ncindex":this.state.ncindex + 1})) } } render() { console.log(this.state.ncindex); return ( <div className="page"> <div className="container"> <div className="user-evaluation"> //向左减一又加一触发setState按钮 <span className="indicator-left" onClick={this.toleftcc}></span> <span className="indicator-right" onClick={this.torightcc}></span> <div className="user-say"> {this.state.fuserinfo[this.state.ncindex][0]} <div className="say-arrow"></div> </div> </div> </div> </div> ); } } export default NavigaBtn;
    Processed: 0.017, SQL: 9