如何創建深層嵌套的不可變對象的多個副本？

Question

我正在嘗試使用javascript從firebase / firestore中獲取數據，所以我做了一個函數，在其中我獲取了產品集合並將此數據通過setState（）方法傳遞給reactjs state.products

我的目標是使這些產品達到我的反應狀態，同時又保留原始數據，而不要通過操縱對其進行更改 。 我了解在JavaScript中，每當我們將對象分配給變量時，我們實際上都是將它們作為參考傳遞而不是復制它們，因此這就是為什么我使用3點（擴展語法）以相同方式將Firestore數據復制到tempProducts []中的原因復制到處女[]

getData = () => {
    let tempProducts = [];
    let virgins = [];
    db.collection("products")
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(item => {
          const singleItem = { ...item.data() };
          virgins = [...virgins, singleItem];
          tempProducts = [...tempProducts, singleItem];
        });
        tempProducts[0].inCart = true;
        this.setState(
          () => {
            return { products: tempProducts };
          },
          () => {
            console.log(
              "this.state.products[0].inCart: " + this.state.products[0].inCart
            );
            console.log("tempProducts[0].inCart: " + tempProducts[0].inCart);
            console.log("virgins[0].inCart: " + virgins[0].inCart);
          }
        );
      });
  };

然后在componentDidMount中調用此方法

componentDidMount() {
    this.getData();
  }

因此，當我控制台日志tempProducts值和state.products值時，我將tempProducts中的第一個產品inCart值更改為true ，它使我一切都好，但是當我控制台日志原始值時， 我期望得到false，但是我沒有 。 我還應該提到，在Firestore數據中，所有inCart值都是假的 。

Answer 1

我通過將原始Firestore數據傳遞給virgins []而不是singleItem來解決了這個問題，因為它是tempProducts []引用的對象，所以virgins virgins = [...virgins, item.data()]; 如果我復制了singleItem對象而不是像virgins virgins = [...virgins, { ...singleItem }];那樣引用它，它也可以工作virgins = [...virgins, { ...singleItem }]; 請記住，我不知道這種解決方案是否有效（不是“內存浪費”）。