React JS如何实现Firestore数值实时更新，解决UI不自动刷新问题

问题根源 #

你遇到的两个问题本质是两个独立的配置错误：

1. 当前Firestore数据读取用的是get()方法，属于一次性拉取查询，仅会在组件挂载时执行一次，后续Firestore侧的数据变更不会主动通知前端，因此UI不会自动更新，必须刷新页面重新拉取才能拿到最新值。
2. 连续点击仅数值仅加1是因为你直接基于本地快照的quantity值做增量，快速连续点击时前序更新请求尚未完成，本地拿到的始终是更新前的旧值，多次更新请求都基于同一个旧值加1，最终只会产生一次增量效果。

修复方案 #

1. 引入Firestore原子增量方法 #

先从Firestore依赖中导入原子增量工具，解决并发更新冲突问题，不需要手动传入当前数值即可实现安全增减：

// 从你的Firebase依赖中引入FieldValue，根据你用的版本调整导入路径
import { FieldValue } from 'firebase/firestore'; 

2. 修改数值更新函数 #

修改mas和对应menos函数，使用原子增量方法，不需要再传入当前quantity参数：

const mas = (productoDescripcion) => {
  const temporalQuery = db.collection('productosAIB').doc(productoDescripcion);
  // 原子加1，不会出现并发更新覆盖问题
  temporalQuery.update({
    cantidad: FieldValue.increment(1)
  })
};

const menos = (productoDescripcion) => {
  const temporalQuery = db.collection('productosAIB').doc(productoDescripcion);
  // 原子减1
  temporalQuery.update({
    cantidad: FieldValue.increment(-1)
  })
};

3. 调整列表渲染的按钮传参 #

删除按钮调用时传入的productos.cantidad参数即可：

<tbody>
  {productos.map((producto, index) => (
    {/* 后续拿到文档id后可直接用producto.id做key，比index更稳定 */}
    <tr key={producto.id || index}>
      <td>
        <button onClick={() => mas(producto.descripcion)} />
        {producto.cantidad}
        <button onClick={() => menos(producto.descripcion)} />
      </td>
      <td>{producto.grado}</td>
      <td>
        {producto.descripcion}
      </td>
      <td>${producto.precio}</td>
    </tr>
  ))}
</tbody>

4. 替换实时监听逻辑 #

将useEffect中的一次性get()查询替换为onSnapshot实时监听，Firestore侧数据变更会自动同步到前端state，UI无需刷新即可更新：

const [productos, setProductos] = useState([]);
const productosRef = db.collection('productosAIB');

useEffect(() => {
  // onSnapshot会监听集合的所有变更，每次变更都会触发回调
  const unsubscribe = productosRef.orderBy('cantidad')
    .onSnapshot((snapshot) => {
      const tempData = [];
      snapshot.forEach((doc) => {
        // 将文档id存入数据中，方便后续做key或者直接调用doc更新
        tempData.push({...doc.data(), id: doc.id});
      });
      setProductos(tempData);
    });
  // 组件卸载时取消监听，避免内存泄漏
  return () => unsubscribe();
}, []);

内容的提问来源于stack exchange，提问作者React Enjoyer