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,react.js,javascript,前端)