react使用useState更新数组失败
2023-12-27 15:26:56
失败案例:
const [addBox, setAddBox] = useState([])
const itemAdd = (item) =>{
addBox.push(item);
setAddBox(addBox)
console.log(addBox,'点击添加按钮')
}
原因:react的useState hook监听的是浅监听
在 React 中,使用?useState
?Hook 来更新数组时,直接对数组进行操作(例如使用?push()
?方法)是无法触发组件重新渲染的。这是因为 React 使用浅比较(shallow comparison)来比较前后状态值的引用,如果引用相同,React 会认为状态没有发生变化,从而不会重新渲染组件。
而在使用解构赋值时,我们会创建一个新的数组实例,并将其赋值给一个新的变量。由于每次渲染都会创建新的数组实例,React 可以正确地检测到数组的变化,并触发组件的重新渲染。
解决方法:解构
setAddBox([...addBox])
成功案例:
const [addBox, setAddBox] = useState([])
const itemAdd = (item) =>{
let nowBox = [...addBox,item];
setAddBox(nowBox)
console.log(nowBox,'点击添加按钮')
}
解构参考地址:ES6 入门教程
文章来源:https://blog.csdn.net/qq_35181466/article/details/135238355
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!