Maison > interface Web > js tutoriel > Comment mettre à jour un seul élément dans un champ de tableau imbriqué dans Firestore ?

Comment mettre à jour un seul élément dans un champ de tableau imbriqué dans Firestore ?

Barbara Streisand
Libérer: 2024-11-26 03:03:13
original
596 Les gens l'ont consulté

How to Update a Single Item in a Nested Array Field in Firestore?

Comment mettre à jour un seul élément dans un champ de tableau dans Firestore

Dans Firestore, les tableaux peuvent être imbriqués dans des documents. Cependant, il est important de comprendre que les champs de tableau dans Firestore se comportent différemment des tableaux dans d'autres langages de programmation.

Énoncé du problème :
Mise à jour d'un élément spécifique dans un champ de tableau dans un document Firestore peut être un défi. Les tentatives de mise à jour directe d'un champ imbriqué dans un tableau, tel que items[0].meta.description, peuvent conduire à des résultats inattendus.

Approche initiale :
Au départ, vous avez essayé pour mettre à jour un champ imbriqué en utilisant le code suivant :

const key = `items.${this.state.index}.meta.description`;
const property = `hello bar`;

this.design.update({
    [key]: property
})
Copier après la connexion

Cependant, cette approche a supprimé tous les autres champs de l'objet à l'heure spécifiée index.

Approche alternative :
Lors de votre tentative ultérieure, vous avez réécrit l'intégralité du méta-objet :

const key = `items.${this.state.index}.meta`;
const property = e.target.value;
let meta = this.state.meta;
meta[e.target.id] = property;

this.design.update({
    [key]: meta
})
Copier après la connexion

Bien que cette approche ait mis à jour avec succès le champ imbriqué, il a converti le tableau en objet.

Solution :
Firestore le fait ne fournit pas un moyen direct de mettre à jour un élément spécifique dans un tableau. Au lieu de cela, vous devez lire l'intégralité du tableau du document, le modifier en mémoire, puis mettre à jour l'intégralité du champ du tableau.

Cela peut être réalisé en suivant les étapes suivantes :

  1. Lisez l'intégralité du tableau du document à l'aide de la méthode get().
  2. Utilisez des méthodes telles que map() ou find() pour localiser et modifier l'élément spécifique dans le array.
  3. Mettez à jour le champ du tableau à l'aide de la méthode set() ou update() avec le tableau modifié.

Voici un exemple de code :

const docRef = firestore.doc(`document/${id}`);

let items;
// Read the document and retrieve the items array
await docRef.get().then((doc) => {
  if (doc.exists) {
    items = doc.data().items;
  }
});

// Update the specific element in the array
const updatedItem = items.find((item) => item.name === 'Bar');
updatedItem.meta.description = 'hello bar';

// Update the entire array field with the modified array
await docRef.update({ items });
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal