如何将多个数组推送到另一个数组并在 React JS 中正确使用 useEffect 更新值？

Question

你好，我试图在我的数组中存储一些数据，我确实尝试了 allData.push(Data1, Data2, Data3)，但它说 .push 不是一个函数，它也不让我只 allData(Data1, Data2, Data3), w/e 我得到的数据覆盖了之前的。我也尝试了 allData(Data1+Data2+Data3) 最后我尝试了一些有人建议我 setAllItems([LibrosID1, LibrosID2, LibrosID3]) 但它最终循环并带来错误：

到目前为止我“最接近”的尝试是这个：

useEffect(() => {
        let x = 0;
        
        LibrosID1.map((i) => {
          x += i.precio
        })
    
        LibrosID2.map((i) => {
          x += i.precio
        })
    
        LibrosID3.map((i) => {
          x += i.precio * i.necesita
        })
    
        setSubTotal(parseFloat(x).toFixed(2))
        setAllItems([LibrosID1, LibrosID2, LibrosID3])
    
        console.log(allItems)
      }, [LibrosID1, LibrosID2, LibrosID3]);

我不明白的是，我对 setSubTotal 做的完全一样，但这并没有给我任何问题，setAllItems 给出也没有任何意义我一个错误和循环，否则 setSubTotal 也会循环和错误，对吗？那我做错了什么？

欢迎任何提示、文档和帮助。

如果您需要完整代码，请告诉我，但我怀疑是否需要。

更新 - 编辑： 所以我修复了循环位并分离了代码，这样人们就不会混淆，但是现在我在尝试获取数据时遇到了延迟

useEffect(() => {
        setAllItems([LibrosID1, LibrosID2, LibrosID3])
        console.log(allItems)
      }, [LibrosID1, LibrosID2, LibrosID3]);

当我点击复选框时，我看到数据是如何在 LibrosID1 上解析的，但它在 allItems 上显示为 0:

当我再次单击该复选框时，它显示 12，即使我只是“取消选中”它们。

我不明白！ 非常沮丧atm

Answer 1

您可以尝试以下方法：

let librosID1 = ["a"];
let librosID2 = ["b"];
let librosID3 = ["c"];

const [allItems, setAllItems] = useState(null);
const [subTotal, setSubTotal] = useState();

useEffect(() => {

  setAllItems([...librosID1, ...librosID2, ...librosID3]);
}, []);

console.log(allItems)

展开运算符用于显示或合并对象或数组中的所有元素。

参考文献：

传播语法 (...)。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax。（2021 年 9 月 28 日访问）。

如何将多个数组推送到另一个数组并在 React JS 中正确使用 useEffect 更新值？

how to push multiple arrays to another array and update the value using useEffect properly in React JS?

arrays

reactjs

use-state