React点击卡片向数组push新元素时覆盖旧元素问题求解

• 你在handleCart函数内部声明itemsArr，该数组是函数作用域内的临时变量，每次函数执行都会初始化为空数组，函数执行结束后就会被回收，自然无法累计存储多次点击的元素。
• 当前你声明的cartItems状态为数字类型，仅用于计数，没有承担存储点击元素集合的作用。

const Shop = () => {
  // 将状态改为数组类型，用来存储点击的元素
  const [cartItems, setCartItems] = useState([]);

  function handleCart(e){
    const clickedItem = e.target.parentElement;
    // 更新状态时保留原有数组内容，追加新元素，使用函数式更新确保拿到最新的状态值
    setCartItems(prevItems => [...prevItems, clickedItem]);
    // 临时打印更新后的数组，如果需要监听状态变化建议使用useEffect
    console.log([...cartItems, clickedItem]);
  }
}

• 不建议直接存储DOM节点到React状态中，DOM节点属于可变的宿主对象，节点销毁后可能引发不可预期的异常，建议存储卡片对应的唯一业务字段（比如商品ID、卡片索引），需要操作节点时再通过标识查询即可。
• 如果需要打印更新后的最新cartItems，可以通过useEffect监听cartItems的变化后再打印，直接在setCartItems后打印拿到的是更新前的旧值。

内容的提问来源于stack exchange，提问作者Undisclosed