錯誤：在 Firestore 的 map 中添加數據，但新數據保存為 map 中的數組而不是字段

Question

我有來自 firestore 的這個colorMap ，它是一個map 。

我要做的是在colorMap中添加更多數據。 假設我有這些：

綠色：50

黑50

紅20

我想添加Pink: 80 。 但是我的代碼目前所做的是，如果我添加Pink: 80 ， Pink將變成一個數組而不是一個字段。 此外，在某些情況下，我可能需要在一次提交中添加更多 colors 和數量（例如Pink: 80 , Yellow: 20 , Brown: 60 ）

這是我將它保存在 Firestore 中時發生的情況。

預期 output一旦我添加Black: 80 ，它也應該是與其他 colors 相同的數據類型。

在 Firestore 中提交：

  //converting colorList to colorMap (map)
  const colorMap = colorList.reduce(function (map, obj) {
    map[obj.color] = obj.colorStocks;
    return map;
  }, {});

  const colorSave = Object.keys(colorMap);
  const qty = Object.values(colorMap);

  const handleSubmit = (index) => async (e) => {
    e.preventDefault();

    const ref = doc(db, "products", state);
    await updateDoc(ref, {
      ...product[index],
      [`colorMap.${colorSave}`]: qty,
    });
    console.log("done");
  };

這是colorMap的控制台：

形式

 {colorList.map((singleColor, index) => (
                    <div key={index}>
                        <>
                            <>
                                <TextField
                                  label="Color"
                                  name="color"
                                  type="text"
                                  id="color"
                                  required
                                  value={singleColor.color}
                                  onChange={(e) => handleColorChange(e, index)}
                                />
                                <TextField
                                  label="Stocks"
                                  name="colorStocks"
                                  type="number"
                                  id="colorStocks"
                                  required
                                  value={singleColor.colorStocks}
                                  onChange={(e) => handleColorChange(e, index)}
                                />
                            </>
                        </>
                      </div>
                      <br />
                        //button to remove the row of the textfield
                    </div>
                  ))}
                    //button to add the row of the textfield

Answer 1

Object.keys(colorMap)和Object.values(colorMap) 將返回 arrays 。 因此，您在updateDoc()方法中提供的不是單個值，而是 arrays。這就是為什么將值存儲為數組而不是 map 的原因。

現在讓我舉個例子進一步解釋一下 -

為了方便起見，我采用了硬編碼 map。

如果 map 只有一個 object 即const data={'Pink':90} ，那么像你一樣運行下面的代碼，

async function updateData() {
 
const data={'Pink':90};
const colorSave=Object.keys(data);
const qty=Object.values(data);
const document=doc(db,'collectionId','documentId');
await updateDoc(document,{[`colorMap.${colorSave}`]:qty});
}

將像下面這樣在 Firestore 中添加數據 -

如果您在 map 中有多個 object 即const data={'Pink':90,'Red':70} ，那么通過像您一樣運行上面的代碼，將像下面這樣將數據添加到 Firestore 中作為colorSave是一個數組，而且qty也是一個數組。 字段名稱將是colorSave中的元素，以逗號分隔。

所以在這里更新文檔的正確方法是使用 for 循環並在其中更新文檔。 示例代碼如下所示 -

async function updateData() {
const data={'Pink':90,'Red':70};
const colorSaveArray=Object.keys(data);
const qtyArray=Object.values(data);
const document=doc(db,'collectionId','documentId');
for (let index = 0; index < colorSaveArray.length; index++) {
  const colorSave = colorSaveArray[index];
  const qty = qtyArray[index];
  await updateDoc(document,{[`colorMap.${colorSave}`]:qty});
}
}

上面的代碼將按照您的意願更新文檔，如下所示 -