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

目录

一、问题参数原因

二、解决方案


一、问题参数原因

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

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

二、解决方案

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

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

总结到此!

相关推荐
佚名猫4 分钟前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
满分观测网友z6 分钟前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js
BillKu8 分钟前
Vue3 + TypeSrcipt 防抖、防止重复点击实例
前端·javascript·vue.js
鱼樱前端9 分钟前
Vue3结合three和babylonjs实现3D数字展厅效果
前端·vue.js
Themberfue12 分钟前
Vue ⑥-路由
前端·javascript·vue.js
whatever who cares14 分钟前
React hook之useRef
前端·javascript·react.js
kooboo china.23 分钟前
Tailwind CSS 实战:基于 Kooboo 构建 AI 对话框页面(八):异步处理逻辑详解
前端·css·人工智能·编辑器·html·交互
天涯学馆27 分钟前
工厂模式在 JavaScript 中的深度应用
前端·javascript·面试
crary,记忆32 分钟前
Angular中Webpack与ngx-build-plus 浅学
前端·webpack·angular·angular.js