关于react的this.setState异步问题，setState数据不更新

我们在给state状态赋值的时候一般都会使用this.setState({name:newName})但是有时候我们会发现值的更新滞后，比如我们刚刚更新的name值，但是页面显示的还是以前的name，出现这种情况的原因就是 setState() 有时候是异步的React 为了优化性能，有可能会将多个 setState() 调用合并为一次更新。所以我们需要用到回调函数来...

Chris__Wang

9651人浏览 · 2018-09-11 15:16:29

Chris__Wang · 2018-09-11 15:16:29 发布

我们在给state状态赋值的时候一般都会使用

this.setState({
    name:newName
})

但是有时候我们会发现值的更新滞后，比如我们刚刚更新的name值，但是页面显示的还是以前的name，出现这种情况的原因就是 setState() 有时候是异步的

React 为了优化性能，有可能会将多个 setState() 调用合并为一次更新。

所以我们需要用到回调函数来解决

this.setState({
    name:newName
},fucntion(){
    //在这里进行一些与name有关的业务逻辑处理
    //这里的name值是最新的
    console.log(name)
})

当然有些时候我们仅仅就是为了更新页面数据信息，显然上面的方法不适用，这时我们使用下面的方法

它接收一个函数，而不是一个对象。该函数接收前一个状态值作为第 1 个参数，并将更新后的值作为第 2 个参数

this.setState((prevState, props) => ({
    name: newName
}));

这样更新的name就是同步的了，当然此处也可以不使用Arrow Function。

【右上角点个赞，谢谢】

HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

Flutter 框架跨平台鸿蒙开发 - 打造一款精美的手机日历应用

本文从零开始，实现了一款功能完善的Flutter日历应用。日期计算：月份天数、星期计算、闰年判断网格布局：GridView实现7×6日历网格状态管理：日期选择、月份切换、日程数据交互设计：滚轮选择器、添加对话框、颜色标签视觉设计：今日高亮、周末标红、节日显示日历看似简单，实则涉及不少细节。希望这篇文章能帮你理解日历应用的开发思路，也欢迎在此基础上继续扩展更多功能！📅 完整源码已上传，欢迎Star

HarmonyOS开发者社区

Flutter 框架跨平台鸿蒙开发 - 开发双人对战五子棋游戏

算法难度特点随机落子⭐最简单，随机选择空位评分函数⭐⭐对每个位置打分，选最高分极小化极大⭐⭐⭐博弈树搜索，考虑对手反应Alpha-Beta剪枝⭐⭐⭐⭐优化搜索，减少计算量蒙特卡洛树搜索⭐⭐⭐⭐⭐随机模拟，适合复杂局面棋盘绘制：CustomPainter绘制网格和星位胜负判定：四方向搜索算法，O(1)复杂度状态管理：棋盘数据、玩家切换、历史记录交互设计：落子、悔棋、重开、高亮显示视觉效果：渐变棋子、