React JS - 如何实时更新 Firestore 值

Question

您好，我已成功更改 Firestore 中文档变量的值，但在我调用硬刷新或正常刷新后它确实更新的函数时，它并没有在视觉上更新（如果有意义的话）。

这是它在表格和 Firestore 中的外观：

表格渲染

火库

当我按下按钮时，它确实将值更改为 +1，但在我刷新页面之前它不会在视觉上发生变化

Firestore 中也会发生变化

所以我想知道是否可以实时执行此操作，因为它不仅不会在我按下按钮后立即更新我不能多次按下它，如果我按下按钮让我们说 10有时它仍然只会做 ++1 而不是 ++1 (x10) 这是一段代码：

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

这是渲染和调用函数的地方：

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

从 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);
          });
      }, []);

如果您需要完整的代码，请告诉我。它可以完成这项工作，但我只是想知道是否有办法让它实时渲染。

Answer 1

您只使用了一次.get() 而reads the documents from the database。如果您想继续listening for changes，请改用onSnapshot：

useEffect(() => {
    productosRef.orderBy('cantidad')
    .onSnapshot()
    ...