如何在firebase firestore的数组中添加地图以做出反应？

Question

  addMoreCases = (e) => {
    e.preventDefault();
    this.setState({
      makeActive10: false,
      toggleDetails10: true,
    });
    const studentName = this.props.location.state.selectedStudent.basicData
      .studentName;
    var db = fire.firestore();
    const casesObject = this.state.casesObject;
    db.collection("students")
      .where("basicData.studentName", "==", studentName)
      .get()
      .then(function (querySnapshot) {
        querySnapshot.forEach(function (doc) {
          console.log(doc.id, " => ", doc.data());
          db.collection("students")
            .doc(doc.id)
            // .doc(  )
            .update(
              {
                ...{
                  casesAndAssociatesData: {
                    ...{ casesObject },
                  },
                },
              }

              // { merge: true }
            );
        });
      });
    this.setState({
      casesObject: [
        // { ...initialCasesForm }
        {
          casesPoliceStation: "",
          crimeNumber: "",
          sectionOfLaw: "",
          stage: "",
        },
      ],
    });
  };
                        <Form onSubmit={this.addMoreCases}>
                          <Form.Row key={index}>
                            <Col>
                              <Form.Control
                                style={{ marginBottom: 20 }}
                                type="text"
                                onChange={(e) =>
                                  this.casesObjectUpdate(e, index)
                                }
                                name="casesPoliceStation"
                                placeholder="Police Station"
                                value={cases.casesPoliceStation}
                                onKeyPress={(e) => {
                                  e.key === "Enter" &&
                                    e.preventDefault();
                                }}
                              />
                            </Col>
                            <Col>
                              <Form.Control
                                style={{ marginBottom: 20 }}
                                type="text"
                                onChange={(e) =>
                                  this.casesObjectUpdate(e, index)
                                }
                                name="crimeNumber"
                                placeholder="Crime Number"
                                value={cases.crimeNumber}
                                onKeyPress={(e) => {
                                  e.key === "Enter" &&
                                    e.preventDefault();
                                }}
                              />
                            </Col>
                            <Col>
                              <Form.Control
                                style={{ marginBottom: 20 }}
                                type="text"
                                onChange={(e) =>
                                  this.casesObjectUpdate(e, index)
                                }
                                name="sectionOfLaw"
                                placeholder="Section Of Law"
                                value={cases.sectionOfLaw}
                                onKeyPress={(e) => {
                                  e.key === "Enter" &&
                                    e.preventDefault();
                                }}
                              />
                            </Col>
                            <Col>
                              <Form.Control
                                style={{ marginBottom: 20 }}
                                type="text"
                                onChange={(e) =>
                                  this.casesObjectUpdate(e, index)
                                }
                                name="stage"
                                placeholder="Stage"
                                value={cases.stage}
                                onKeyPress={(e) => {
                                  e.key === "Enter" &&
                                    e.preventDefault();
                                }}
                              />
                            </Col>
                            <Col>
                              <Button
                                type="submit"
                                variant="outline-primary"
                              >

在这里，在上面的代码中，我尝试在数组中添加更多地图，用于特定的文档 ID。因此，在按钮提交时，我将使用“addMoreCases”功能。它还应该在casesObject 数组的caseAndAssociatesData 字段中添加另一个映射。我将附上我的firestore数据库图像，在“casesAndAssociatesData”字段中，在“casesObject”数组中，我需要另一个带有表单值的映射，应该添加递增的Indexin the above image, if I enter the values in form and hit submit button, I need the values to be added in "casesObject" array with index "2" in "casasAndAssociatesData"

Answer 1

据我了解，您的数据库中有以下结构：

collection:
 document:
    casesAndAssociatesData:obj_array
    casesObject:obj_array

您想向casesObject 添加更多数据。由于 casesObject 是文档的一个字段，因此每次添加更多数据时都必须更新它。

所以方法是：

1. 从加载的文档中获取所有数据作为地图数组。
2. 向该数组添加另一个元素。
3. 使用新数据更新整个 casesObject 字段。

这是如何修改代码的示例：

querySnapshot.forEach(function (doc) {

   console.log(doc.id, " => ", doc.data());

   //Prepare the new data that you want to add :
   var newCasesObject = {
       casesPoliceStation: "New police station Value",
       crimeNumber: "New crime value",
       sectionOfLaw: "New section of law",
       stage: "ss",
   }

   //Get the array with data from the loaded document
   var dataObj = doc.data().casesObject;

   //Push the new data to that array
   dataObj.push(newCasesObject);

   //Call another function that will update the document with the new data
   updateData(doc.id, dataObj);

});

//The new update function:
async function updateData(docID, obj){

   const cityRef = db.collection('[COLLECTION_NAME]').doc(docID);

   // Set the 'capital' field of the city
   const res = await cityRef.update({casesObject: obj});

}

我已经在我的数据库上对此进行了测试，它的工作方式与您描述的一样。每次添加新的地图数据时，它只更新字段casesObject。