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

目录

一、问题参数原因

二、解决方案


一、问题参数原因

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

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

二、解决方案

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

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

总结到此!

相关推荐
有味道的男人17 分钟前
1688 跨境 API:多语言、跨境代采、独立站商品同步方案
java·服务器·前端
大师兄666822 分钟前
HarmonyOS 服务卡片开发之JS 卡片开发
javascript·华为·harmonyos·harmonyos6·formkit
索西引擎23 分钟前
【实战】Changesets:Monorepo 版本管理与变更日志的实践
前端
Highcharts.js37 分钟前
AI向量知识谱系图表创建示例代码|Highcharts网络图表(networkgraph)搭建案例
开发语言·前端·javascript·网络·信息可视化·编辑器·highcharts
阿正的梦工坊1 小时前
React:构建用户界面的JavaScript库
javascript·react.js·ui
行走的陀螺仪1 小时前
[特殊字符] JavaScript 设计模式完全指南:从入门到精通(含20种模式)
开发语言·javascript·设计模式
zhangxingchao1 小时前
AI应用开发五:RAG高级技术与调优
前端·人工智能·后端
KaMeidebaby1 小时前
卡梅德生物技术快报|单 B 细胞抗体技术:全犬源单抗制备流程、关键参数与性能验证
前端·数据库·其他·百度·新浪微博
hazel1 小时前
网络与工程化
前端
小陶来咯1 小时前
AI Agent 设计模式:ReAct 深度解析
人工智能·react.js·设计模式