react使用useState更新数组失败

本文主要是介绍react使用useState更新数组失败，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

失败案例：

  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 入门教程

这篇关于react使用useState更新数组失败的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---