本教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。react数组变化不更新怎么办?react中 一个state数组某元素属性发生变化时,setState页面不更新 写代码过程中,你会发现,如果
本教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。
react数组变化不更新怎么办?
react中 一个state数组某元素属性发生变化时,setState页面不更新
写代码过程中,你会发现,如果直接使用push等方法改变state,按理来说,push会改变原数组,数组应该更新,但渲染出来的state并不会更改。
今天遇到的问题是:组件内对数组元素进行修改后数据有变化但是页面没重新渲染
话说这是因为组件没能够识别数组的变化,所以页面没有重新渲染
所以只要让组件感知到你发生了改变,就可以达到刷新的效果
原因:
这是由于js中,数组的赋值是引用传递的,array.push相当于直接更改了数组对应的内存块,但react内部用于对比的array的内存并没有更改,是指向同一个内存的,setState只做shallow compare,因此没有触发re-render。
可以使用扩展运算符,创建一个新数组,更改内存引用
需求:
解决办法:解构后重新赋值
const onClick = (key) => {// tab点击函数
if (key === 'addTab') {
panes.push({
key: panes.length,
tab: `筛选记录${panes.length + 1}`
})
setPanes([...panes])
}
}
以上就是react数组变化不更新怎么办的详细内容,更多请关注编程网其它相关文章!
--结束END--
本文标题: react数组变化不更新怎么办
本文链接: https://www.lsjlt.com/news/206328.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0