当前位置: 首页 > news >正文

react使用useState更新数组失败

失败案例:

  const [addBox, setAddBox] = useState([])const itemAdd = (item) =>{addBox.push(item);setAddBox(addBox)console.log(addBox,'点击添加按钮')}

原因:react的useState hook监听的是浅监听

在 React 中,使用 useState Hook 来更新数组时,直接对数组进行操作(例如使用 push() 方法)是无法触发组件重新渲染的。这是因为 React 使用浅比较(shallow comparison)来比较前后状态值的引用,如果引用相同,React 会认为状态没有发生变化,从而不会重新渲染组件。

而在使用解构赋值时,我们会创建一个新的数组实例,并将其赋值给一个新的变量。由于每次渲染都会创建新的数组实例,React 可以正确地检测到数组的变化,并触发组件的重新渲染。

解决方法:解构

setAddBox([...addBox])

成功案例:

  const [addBox, setAddBox] = useState([])const itemAdd = (item) =>{let nowBox = [...addBox,item];setAddBox(nowBox)console.log(nowBox,'点击添加按钮')}

解构参考地址:ES6 入门教程

相关文章:

  • 关于“Python”的核心知识点整理大全44
  • 数据探查系列:如何进行有意义的探索性数据分析(EDA)
  • 『JavaScript』JavaScript事件类型详解:全面解析各类用户交互行为
  • Ubuntu中fdisk磁盘分区并挂载、扩容逻辑卷
  • mapboxgl 中热力图的实现以及给热力图点增加鼠标移上 popup 效果
  • 【云原生】Kubernetes Operator模式
  • 基于飞浆OCR的文本框box及坐标中心点检测JSON格式保存文本
  • 系列十(实战)、发送 接收批量消息(Java操作RocketMQ)
  • 图像处理-周期噪声
  • 云计算:OpenStack 配置二层物理网卡为三层桥的接口
  • 文件监控-IT安全管理软件
  • 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之线性布局容器Row组件
  • OpenHarmony城市技术论坛武汉站:探索大模型时代的终端操作系统创新
  • 二叉树的非递归遍历|前中后序遍历
  • android studio导入module
  • 【JavaScript】通过闭包创建具有私有属性的实例对象
  • 【跃迁之路】【669天】程序员高效学习方法论探索系列(实验阶段426-2018.12.13)...
  • ES6系列(二)变量的解构赋值
  • JAVA 学习IO流
  • k8s如何管理Pod
  • Laravel Mix运行时关于es2015报错解决方案
  • Mithril.js 入门介绍
  • MySQL几个简单SQL的优化
  • 对象引论
  • 多线程 start 和 run 方法到底有什么区别?
  • 前端面试总结(at, md)
  • 一些基于React、Vue、Node.js、MongoDB技术栈的实践项目
  • 移动端 h5开发相关内容总结(三)
  • 用Node EJS写一个爬虫脚本每天定时给心爱的她发一封暖心邮件
  • 宾利慕尚创始人典藏版国内首秀,2025年前实现全系车型电动化 | 2019上海车展 ...
  • ​MySQL主从复制一致性检测
  • ​软考-高级-系统架构设计师教程(清华第2版)【第15章 面向服务架构设计理论与实践(P527~554)-思维导图】​
  • ​中南建设2022年半年报“韧”字当头,经营性现金流持续为正​
  • #我与Java虚拟机的故事#连载09:面试大厂逃不过的JVM
  • (1)SpringCloud 整合Python
  • (poj1.3.2)1791(构造法模拟)
  • (动手学习深度学习)第13章 计算机视觉---微调
  • (动态规划)5. 最长回文子串 java解决
  • (论文阅读30/100)Convolutional Pose Machines
  • (四)模仿学习-完成后台管理页面查询
  • (一) storm的集群安装与配置
  • (原創) 是否该学PetShop将Model和BLL分开? (.NET) (N-Tier) (PetShop) (OO)
  • (转)使用VMware vSphere标准交换机设置网络连接
  • (转)详解PHP处理密码的几种方式
  • .NET 4.0中使用内存映射文件实现进程通讯
  • .net core IResultFilter 的 OnResultExecuted和OnResultExecuting的区别
  • .NET/C# 编译期能确定的字符串会在字符串暂存池中不会被 GC 垃圾回收掉
  • .NET/C# 在 64 位进程中读取 32 位进程重定向后的注册表
  • [1181]linux两台服务器之间传输文件和文件夹
  • [BZOJ1053][HAOI2007]反素数ant
  • [C#]使用PaddleInference图片旋转四种角度检测
  • [Eclipse] 详细设置护眼背景色和字体颜色并导出
  • [github配置] 远程访问仓库以及问题解决
  • [LeetCode]-Spiral Matrix III 螺旋矩阵
  • [Machine Learning] Learning with Noisy Labels