I just want to make datatable for reporting. But I can't get counts that I want.

I got city ids and there's data related to cities.

I need to make datatable which one get counts about cities. I can get numbers on console.log but cant show on screen. How can I do that?

I tried things below:

• I did GetDetails return snap.size didn't work
• I tried flatlist but didn't work
• I tried to call data with function but didn't work

Code:

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>);
}

CodePudding user response：

Since the value you're looking for is loaded asynchronously from the database, you'll have to put it in a state variable to get the UI to update - very similarly to what you already do for 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);
  })
}

You should probably also trigger the loading of this data from the then of GetCities, rather than the UI rendering:

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