react中修改state中的值无效?


// 初始化state
state = {
  personArr:[
    {name:'张三',id:1},
    {name:'李四',id:2},
    {name:'王五',id:3}
  ]
}
 componentDidMount(){
    const newName = '赵六'
    const indexUpdate = 1

    const newArr = this.state.personArr.map((item,index)=>{
      if(indexUpdate === index){
        return {...item,name:newName}
      }else{
        return {...item}
      }
    })
    this.setState({
        personArr:newArr
    })
    console.log('personArr',this.state.personArr)
}

打印的值: 

问题来了,明明已经修改过了,为什么拿不到值呢,原来是setState的执行机制导致的,setState是作为异步来执行的,打印是同步的,因此拿不到值

解决: 要想获取更新后的值,只需在setState第二个参数中获取即可

this.setState({
   personArr:newArr
},()=>{
    console.log('personArr',this.state.personArr)
})

 打印结果:

 完美解决!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/410290.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java 过滤器深入了解学习

Java 过滤器深入了解学习 生活不能等待别人来安排,要自己去争取和奋斗;而不论其结果是喜是悲,但可以慰藉的是,你总不枉在这世界上活了一场。有了这样的认识,你就会珍重生活,而不会玩世不恭;同时…

Netty权威指南——基础篇1(同步阻塞IO-BIO)

1 Linux网络I/O模型简介 1.1 简述 Linux的内核将所有外部设备都看做一个文件来操作,对一个文件的读写操作会调用内核提供的命令,返回一个file descriptor(fd,文件描述符)。而对一个socket的读写也会有相应的描述符,称为socketfd(…

SpringBoot原理篇

文章目录 SpingBoot原理1. 配置优先级2. Bean管理2.1 获取Bean2.2 Bean作用域2.3 第三方Bean 3. SpringBoot原理3.1 起步依赖3.2 自动配置3.2.1 概述3.2.2 常见方案3.2.2.1 概述3.2.2.2 方案一3.2.2.3 方案二 3.2.3 原理分析3.2.3.1 源码跟踪3.2.3.2 Conditional 3.2.4 案例3.2…

深入探究Nginx的使用方法

目录 引言 一、网络状态页 二、Nginx 第三方模块 三、变量 (一)内置变量 (二)自定义变量 四、自定义日志 (一)有关日志的配置信息 (二)error日志的设置 1.日志的等级 2.自…

怎么样避免被企业裁掉呢?

在当前经济环境下,许多企业纷纷选择裁员以降低成本、提升效益。面对这一现象,员工如何避免成为裁员风波中的牺牲品呢?本文将从多个角度为您提供应对策略。 首先,要了解企业裁员的背景和原因。金融危机、行业变革、市场竞争等外部…

第十篇【传奇开心果系列】Python的文本和语音相互转换库技术点案例示例:Microsoft Azure开发语音翻译应用程序经典案例

传奇开心果博文系列 系列博文目录Python的文本和语音相互转换库技术点案例示例系列 博文目录前言一、雏形示例代码二、扩展思路介绍三、Azure多语种支持示例代码四、Azure实时对话模式示例代码五、Azure自定义翻译模型示例代码六、Azure语音合成示例代码七、Azure用户界面优化示…

接口自动化测试用例如何设计

说到自动化测试,或者说接口自动化测试,多数人的第一反应是该用什么工具,比如:Python Requests、Java HttpClient、Apifox、MeterSphere、自研的自动化平台等。大家似乎更关注的是哪个工具更优秀,甚至出现“ 做平台的 &…

如果发现某个地方太薄了想要加厚怎么办?

Q 做完模型后,发现斧头柄部太薄了想要加厚怎么办? A 使用圆形套索区域,选中点 然后左视图,选择缩放,横向拉宽即可

c# 广度优先搜索(Breadth-First Search,BFS)

在这篇文章中我将讨论用于树和图的两种遍历机制之一。将使用 C# 示例介绍广度优先搜索 (BFS)。图是最具挑战性和最复杂的数据结构之一。 广度优先搜索的工作原理:广度优先搜索 (BFS)是一种探索树或图的方法。在 BFS 中,您首先探索…

实战 vue3 使用百度编辑器ueditor

前言 在开发项目由于需求vue自带对编辑器不能满足使用,所以改为百度编辑器,但是在网上搜索发现都讲得非常乱,所以写一篇使用流程的文章 提示:以下是本篇文章正文内容,下面案例可供参考 一、下载ueditor编辑器 一个“…

好书推荐丨细说Python编程:从入门到科学计算

文章目录 写在前面Python简介推荐图书内容简介编辑推荐作者简介 推荐理由粉丝福利写在最后 写在前面 本期博主给大家推荐一本Python基础入门的全新正版书籍,对Python、机器学习、人工智能感兴趣的小伙伴们快来看看吧~ Python简介 Python 是一种广泛使用的高级、解…

基于插件实现RabbitMQ“延时队列“

1.官网下载 在添加链接描述下载rabbitmq_delayed_message_exchange 插件,本文以v3.10.0为例 1.1.上传安装包 scp /Users/hong/资料/rabbitmq_delayed_message_exchange-3.10.0.ez root10.211.55.4:/usr/local/software1.2.将文件移入RabbitMQ的安装目录下的plugins目录 m…

数学建模【插值与拟合】

一、插值与拟合简介 在数学建模过程中,通常要处理由试验、测量得到的大量数据或一些过于复杂而不便于计算的函数表达式,针对此情况,很自然的想法就是,构造一个简单的函数作为要考察数据或复杂函数的近似。插值和拟合就可以解决这…

【愚公系列】2024年02月 大数据教学课程 017-Hadoop环境配置

🏆 作者简介,愚公搬代码 🏆《头衔》:华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主&#xf…

FPGA 与 数字电路的关系 - 这篇文章 将 持续 更新 :)

先说几个逻辑:(强调一下在这篇文章 输入路数 只有 1个或2个,输出只有1个,N个输入M个输出以后再说) 看下面的几个图: 图一( 忘了 这是 啥门,不是门吧 :)也就…

【好书推荐-第五期】《Java开发坑点解析:从根因分析到最佳实践》(异步图书出品)

😎 作者介绍:我是程序员洲洲,一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主、前后端开发、人工智能研究生。公粽号:程序员洲洲。 🎈 本文专栏:本文…

I/O流(C++)

输入输出操作是程序中必不可少的操作,通过输入输出可以完成程序和外界的交互。 C语言支持两种I/O操作: (1)从C语言继承来的I/O函数输入输出语句:scanf()、printf()函数 (2)面向对象的I/O流类…

动画法则与动画曲线解析

先介绍一些和代码关系不大的动画常识 挤压与拉伸(Squeeze and stretch) 当有力作用到物体身上时,物体将会产生一定的形变,比如你在拍球时,球落地后会被挤压,弹起时会产生拉伸,对于具体的挤压与拉伸的强度,与物体的硬度和用力的大小有关。做动画要遵循运动规律让动画更…

一周学会Django5 Python Web开发-Http请求HttpRequest请求类

锋哥原创的Python Web开发 Django5视频教程: 2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~共计25条视频,包括:2024版 Django5 Python we…

JavaWeb 自己给服务器安装SQL Server数据库遇到的坑

之前买的虚拟主机免费送了一个SQL Server数据库,由于服务器提供商今年下架我用的那款虚拟主机产品,所以数据库也被收回了。我买了阿里云云服务器,但是没有数据库,于是自己装了一个SQL Server数据库,总结一下遇到的坑。…