前端 React useState 数组或对象改变后页面没有更新渲染解决

目录

一、问题参数原因

二、解决方案


一、问题参数原因

当数组或对象的原本地址没有发生改变时,页面不会检测到数据更新,下面是有问题的写法:

javascript 复制代码
 const [care, setCare] = useState<boolean[]>([])
 care[index] = true
 setCare(care)  //这种写法的源地址不会发生变化,导致页面不能检测到地址变化

二、解决方案

可以通过解构数组或对象的形式来更新数据地址:

javascript 复制代码
care[index] = true
setCare([...care])  //解构重构后地址刷新,页面渲染刷新,对象类型也类似

总结到此!

相关推荐
excel3 分钟前
🔍 Vue 模板编译中的资源路径转换机制:transformAssetUrl 深度解析
前端
excel5 分钟前
Vue 模板编译中的 srcset 机制详解:从 HTML 语义到编译器实现
前端
excel5 分钟前
🌐 从 Map 到 LRUCache:构建智能缓存工厂函数
前端
excel6 分钟前
Vue 模板编译中的资源路径转换:transformSrcset 深度解析
前端
excel14 分钟前
Vue 工具函数源码解析:URL 解析与分类逻辑详解
前端
excel17 分钟前
Vue SFC 样式预处理器(Style Preprocessor)源码解析
前端
excel18 分钟前
深度解析:Vue Scoped 样式编译原理 —— vue-sfc-scoped 插件源码详解
前端
excel20 分钟前
Vue SFC Trim 插件源码解析:自动清理多余空白的 PostCSS 实现
前端
excel24 分钟前
Vue SFC 样式变量机制源码深度解析:cssVarsPlugin 与编译流程
前端
excel26 分钟前
🧩 Vue 编译工具中的实用函数模块解析
前端