React Native+Firestore：产品列表数据读取与求和问题

1. 确保已配置Firebase依赖 #

先确认你已经在项目中安装并配置了React Native Firebase：

# 安装核心包和Firestore
npm install @react-native-firebase/app @react-native-firebase/firestore

（iOS项目需额外执行cd ios && pod install）

2. 数据结构说明 #

假设你的Firestore products集合结构如下（若实际结构不同，可对应调整代码）：

products (集合)
  - 文档1（比如文档ID为"grocery_list"）
    - listName: "食品清单"
    - items: [
        { name: "苹果", price: 8 },
        { name: "面包", price: 12 }
      ]
  - 文档2
    - listName: "数码配件"
    - items: [
        { name: "手机壳", price: 35 },
        { name: "钢化膜", price: 20 }
      ]

3. 查询数据并计算总价的代码实现 #

以下是函数组件示例，直接获取所有产品列表并计算每个列表的总价：

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList } from 'react-native';
import firestore from '@react-native-firebase/firestore';

const ProductListsScreen = () => {
  const [productLists, setProductLists] = useState([]);

  useEffect(() => {
    // 监听products集合的所有文档变化
    const unsubscribe = firestore()
      .collection('products')
      .onSnapshot(querySnapshot => {
        const lists = [];
        querySnapshot.forEach(doc => {
          const data = doc.data();
          // 计算当前列表的总价
          const totalPrice = data.items.reduce((sum, item) => sum + item.price, 0);
          lists.push({
            id: doc.id,
            listName: data.listName,
            items: data.items,
            totalPrice: totalPrice
          });
        });
        setProductLists(lists);
      });

    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe();
  }, []);

  return (
    <View style={{ padding: 20 }}>
      <FlatList
        data={productLists}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <View style={{ marginBottom: 20, padding: 15, borderWidth: 1, borderColor: '#eee', borderRadius: 8 }}>
            <Text style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 10 }}>{item.listName}</Text>
            {item.items.map((product, index) => (
              <Text key={index} style={{ marginBottom: 5 }}>
                {product.name}: ¥{product.price}
              </Text>
            ))}
            <Text style={{ fontSize: 16, fontWeight: '600', marginTop: 10, color: '#f5222d' }}>
              总价: ¥{item.totalPrice}
            </Text>
          </View>
        )}
      />
    </View>
  );
};

export default ProductListsScreen;

关键说明 #

• 实时监听 vs 一次性获取：示例用onSnapshot实时同步数据更新，若只需一次性获取，可替换为get()方法。
• 总价计算逻辑：通过数组reduce方法遍历列表内的产品，累加价格得到总和。
• 内存管理：组件卸载时必须取消Firestore监听，防止内存泄漏。

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