错误：在 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});
}
}

上面的代码将按照您的意愿更新文档，如下所示 -