Как добавить карту в массив в firebase firestore в React?

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"
                              >

Здесь, в приведенном выше коде, я пытаюсь добавить еще несколько карт в массив, используя для указанного c идентификатор документа. Так что на кнопке «Отправить» я использую функцию «addMoreCases». И он мог бы добавить еще одну карту в массив caseObject, в поле caseAndAssociatesData. Я буду прикреплять изображение своей базы данных firestore, и в этом случае в поле «casesAndAssociatesData» в массиве «caseObject» мне нужна другая карта со значениями формы, которые должны быть добавлены с увеличенным индексом на изображении выше, если Я ввожу значения в форму и нажимаю кнопку «Отправить». Мне нужно, чтобы значения были добавлены в массив «casesObject» с индексом «2» в «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 при каждом добавлении новых данных карты.