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

目录

一、问题参数原因

二、解决方案


一、问题参数原因

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

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

二、解决方案

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

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

总结到此!

相关推荐
Hilaku7 分钟前
Vue 和 React 真正的差距,不在语法,而在团队犯错成本
前端·javascript·程序员
研☆香18 分钟前
为什么变量声明在赋值前也能使用?—— 深入理解 JavaScript 变量提升与作用域
开发语言·前端·javascript
Liora_Yvonne35 分钟前
目录结构到底怎么设计?别再把 components 和 utils 当垃圾桶了
前端
光影少年42 分钟前
RN 样式特点:Flex 布局默认、没有像素单位、样式不能级联
react native·react.js·掘金·金石计划
柯克七七1 小时前
我把 bug 修得太干净了,测试组以为这个模块本来就没问题
前端·javascript·typescript
Null1551 小时前
浏览器唤起桌面端应用(终极篇)
前端·javascript
Quz1 小时前
QML Label 完整用法与 Text 组件选型
前端·qt
妙码生花1 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(三十四):后台初始化请求实现
前端·javascript·go
天若有情6731 小时前
前端性能优化:从“按下预加载”到“AI级智能预判系统”
前端·性能优化·js·active·hover·首屏加载
JackieZhengChina1 小时前
零依赖轻量级JS悬浮提示插件title2tip-js的使用教程
开发语言·javascript·ecmascript