Hola, he cambiado con éxito el valor de una variable de documento dentro de mi Firestore, pero no se actualiza visualmente (si eso tiene sentido) tan pronto como llamo a la función, se actualiza después de una actualización completa o una actualización normal.

Así es como se ve en la tabla y en el Firestore:

Representación de tabla

Firestore

Cuando presiono el botón, cambia el valor a +1 pero no cambia visualmente hasta que actualizo la página

y también hace cambios en el Firestore

Entonces, quiero saber si es posible hacer esto en tiempo real porque no solo no se actualiza tan pronto como presiono el botón, no puedo presionarlo más de una vez, si presiono el botón digamos 10 veces lo hará todavía solo hacer ++1 en lugar de ++1 (x10) esta es la pieza de código:

 const mas = (producto, quantity) => { const temporalQuery = db.collection('productosAIB').doc(producto); temporalQuery.update({ cantidad: ++quantity }) };

Y aquí es donde se representa y donde se llama a la función:

 <tbody> {productos.map((productos, index) => ( <tr key={productos.id || index}> <td> <button onClick={() => mas(productos.descripcion, productos.cantidad)} /> {productos.cantidad} <button onClick={() => menos(productos.descripcion, productos.cantidad)} /> </td> <td>{productos.grado}</td> <td > {productos.descripcion} </td> <td >${productos.precio}</td> </tr> )) } </tbody>

Bit que lee de firebase

 const [productos, setProductos] = useState([]); const productosRef = db.collection('productosAIB'); useEffect(() => { productosRef.orderBy('cantidad') .get() .then((snapshot) => { const tempData = []; snapshot.forEach((doc) => { const data = doc.data(); tempData.push(data); }); setProductos(tempData); }); }, []);

si necesita código completo hágamelo saber. Hace el trabajo, pero solo quería saber si había una manera de hacerlo en tiempo real.