响应本地firestore静态页面查询

Question

我只想制作用于报告的数据表。但我无法得到我想要的计数。

我有城市ID，还有与城市相关的数据。

我需要制作一个关于城市的数据表。我可以在console.log上获取号码，但不能显示在屏幕上。我该怎么做？

我尝试了以下内容：

• 我做了GetDetails返回快照。size不起作用
• 我试过平面主义，但没有成功
• 我尝试用函数调用数据，但没有成功

代码：

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

export default function TargetStaticsScreen() {
const [zones, setZones] = useState([])
function GetCities() {
var z = [];
firestore().collection('RandomZones').orderBy('City', 'asc').get().then(zones => {
setZones(zones.docs)
})
}
async function GetDetails({ cityid }) {
let snap = await firestore().collection('RandomZones').doc(cityid).collection('targetlist').get()
return (<DataTable.Cell key={cityid} numeric>{snap.size}</DataTable.Cell>
)
}
function RemainingDots(cityid) {
firestore().collection('RandomZones').doc(cityid).collection('targetlist').where('isUsed', '==', false).get().then(snap => {
return snap.size;
})
}

return (
<ScrollView>
<Button title='getdata' onPress={() => GetCities()} />
<DataTable>
<DataTable.Header>
<DataTable.Title>İl</DataTable.Title>
<DataTable.Title numeric>Toplam Nokta</DataTable.Title>
<DataTable.Title numeric>Kalan Nokta</DataTable.Title>
<DataTable.Title numeric>Aktif Nokta</DataTable.Title>
<DataTable.Title numeric>Aktif Nokta Tutar</DataTable.Title>
</DataTable.Header>
{zones.map((x) => {
return (
<DataTable.Row key={x.id}>
<DataTable.Cell>{x.id}</DataTable.Cell>
<GetDetails cityid={x.id} />
<DataTable.Cell numeric>{RemainingDots(x.id)}</DataTable.Cell>
<DataTable.Cell numeric>111</DataTable.Cell>
<DataTable.Cell numeric>111</DataTable.Cell>
</DataTable.Row>
)
}
)}
</DataTable>
</ScrollView>);
}

Answer 1

由于您要查找的值是从数据库异步加载的，因此您必须将其放在状态变量中才能更新UI，这与您已经为setZones所做的非常类似。

const [detailsForRegions, setDetailsForRegions] = useState({})
...
async function GetDetails(cityid) {
firestore().collection('RandomZones').doc(cityid).collection('targetlist').get().then((snap) => {
let data = detailsForRegions;
data[cityid] = snap.size;
setDetailsForRegions(data);
})
}

您可能还应该触发从GetCities的then加载此数据，而不是从UI呈现：

function GetCities() {
var z = [];
firestore().collection('RandomZones').orderBy('City', 'asc').get().then(zones => {
setZones(zones.docs)
zones.docs.map(zone => GetDetails(zone.id)); // 👈
})
}

然后：

1. 异步提取每个城市的详细信息
2. 将它们设置为进入时的状态，然后
3. 每次重新呈现UI