javascript - React JS - 如何实时更新 Firestore 值

问题描述

您好，我已经成功更改了 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);
          });
      }, []);

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

标签： javascriptreactjsfirebasegoogle-cloud-firestore

您正在使用.get()它从数据库中读取文档一次。如果您想继续侦听更改，请onSnapshot改用：

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

javascript - React JS - 如何实时更新 Firestore 值

问题描述

解决方案

推荐阅读