React JS中如何向useState管理的数组推送多个对象且不覆盖旧值

问题根源 #

1. React useState 返回的状态更新函数仅接受第一个参数作为新的状态值，你调用 setAllItems(LibrosID1, LibrosID2, LibrosID3) 时，后续两个参数会被直接忽略，因此最终 allItems 只会被赋值为 LibrosID1 的值。
2. 你不能直接对 allItems 调用 push 方法，React 状态是不可变值，直接修改原状态不会触发更新，还会抛出类型错误。
3. 你现在用于计算总价的 useEffect 没有声明依赖数组，会在每次组件渲染后重复执行，可能导致意外的性能问题或逻辑错误。

解决方案 #

合并三个数组存入allItems #

如果需要将三个分类的商品合并为一个一维数组存储，更新函数写法如下：

setAllItems([...LibrosID1, ...LibrosID2, ...LibrosID3])

如果需要保留分类结构，存储为二维数组，写法如下：

setAllItems([LibrosID1, LibrosID2, LibrosID3])

补全useEffect依赖 #

给计算总价和更新allItems的useEffect添加完整依赖，确保依赖变更时才重新执行逻辑，同时可以用reduce简化总价计算逻辑：

useEffect(() => {
  const total = [LibrosID1, LibrosID2, LibrosID3]
    .flat()
    .reduce((sum, item) => sum + Number(item.precio), 0)
  setAllItems([...LibrosID1, ...LibrosID2, ...LibrosID3])
  setSubTotal(total.toFixed(2))
}, [LibrosID1, LibrosID2, LibrosID3])

其他优化建议 #

你当前三套商品分类的选择逻辑重复度很高，可以把选择逻辑封装成自定义Hook，避免重复写高度相似的handleChange代码，后续维护更方便。

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