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

目录

一、问题参数原因

二、解决方案


一、问题参数原因

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

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

二、解决方案

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

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

总结到此!

相关推荐
柯南二号8 小时前
【大前端】 TypeScript vs JavaScript:全面对比与实践指南
前端·javascript·typescript
岁月宁静8 小时前
AI 语音合成技术实践:实现文本转语音实时流式播放
前端·vue.js·node.js
用户1908722824788 小时前
多段进度条解决方案
前端
閞杺哋笨小孩8 小时前
Vue3 可拖动指令(draggable)
前端·vue.js
鱼前带猫刺猬8 小时前
leafer-js实现简单图片裁剪(react)
前端
ye_1238 小时前
前端性能优化之Gzip压缩
前端
用户904706683578 小时前
uniapp Vue3版本,用pinia存储持久化插件pinia-plugin-persistedstate对微信小程序的配置
前端·uni-app
文心快码BaiduComate9 小时前
弟弟想看恐龙,用文心快码3.5S快速打造恐龙乐园
前端·后端·程序员
Mintimate9 小时前
Vue项目接口防刷加固:接入腾讯云天御验证码实现人机验证、恶意请求拦截
前端·vue.js·安全
Larry_Yanan9 小时前
QML学习笔记(三十一)QML的Flow定位器
java·前端·javascript·笔记·qt·学习·ui