Я не могу перерисовать FlatList после пустых данных?

Question

Я получаю данные из Firebase в режиме реального времени и помещаю их в FlatList, и когда я удаляю их из консоли «Firebase», они удаляются из списка на экране очень хорошо, но последний элемент в массиве «Данные» не может бытьудалено, я не знаю почему!

Я использую onRefresh Props, но не помогаю мне, потому что мы все знаем, что БД работает в режиме реального времени, и когда мы добавим любой элемент, он будет последним без обновления. это не работает и с последним элементом, а просто застряла загрузка без повторного рендеринга FlatList

Хотя я использую .once ('значение'), когда я получаю данные из БД, обновляю работу, но когда яобновить после удаления последнего элемента, загрузка загрузки застряла и не может исчезнуть последний элемент

, так как я могу решить эту проблему?

вот мой код

import auth from '@react-native-firebase/auth';
import database from '@react-native-firebase/database';
import React, {Component} from 'react';
import {
  Dimensions,
  FlatList,
  Image,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

const {width} = Dimensions.get('window');
export default class PendingOrders extends Component {
  constructor(props) {
    super(props);
    this.state = {
      orders: [],
      forceUpdate: true,
      isFetching: false,
    };
  }
  onRefresh = () => {
    this.setState({isFetching: true}, () => this.getApiData());
  };
  getApiData = () => {
    try {
      const uid = auth().currentUser.uid;
      const Orders = database().ref(`usersOrders/${uid}`);
      Orders.on('value', snapshot => {
        let orders = [];
        snapshot.forEach(childSnapshot => {
          if (childSnapshot.val().status == 'pending') {
            orders.push({
              buildingNumber: childSnapshot.val().buildingNumber,
              service: childSnapshot.val().categoryName,
              date: childSnapshot.val().date,
              time: childSnapshot.val().time,
              description: childSnapshot.val().problemDescription,
              status: childSnapshot.val().status,
              images: childSnapshot.val().Images,
            });
            this.setState({orders, forceUpdate: false, isFetching: false}, () =>
              console.log(this.state.orders),
            );
            return;
          }
        });
      });
    } catch (err) {
      console.log('Error fetching data: ', err);
    }
  };
  componentDidMount() {
    this.getApiData();
  }

  _listEmptyComponent = () => {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Image
          style={{
            width,
            height: width * 0.7,
            resizeMode: 'contain',
          }}
          source={require('../../assets/empty.png')}
        />
        <Text
          style={{
            color: '#000',
            marginVertical: 15,
            textAlign: 'center',
            fontSize: 20,
          }}>
       No item found
        </Text>
      </View>
    );
  };
  render() {
    console.log('is?', this.state.forceUpdate);
    return (
      <FlatList
        showsVerticalScrollIndicator={false}
        data={this.state.orders}
        extraData={this.state.isFetching}
        onRefresh={() => this.onRefresh()}
        ListEmptyComponent={this._listEmptyComponent()}
        refreshing={this.state.isFetching}
        contentContainerStyle={{
          flexBasis: '100%',
        }}
        renderItem={({item}) => {
          return (
            <TouchableOpacity
              onPress={() =>
                this.props.navigation.navigate('OrderDetailsScreen', {
                  service: item.service,
                  time: item.time,
                  date: item.date,
                  description: item.description,
                  images: item.images,
                  status: item.status,
                })
              }
              style={{
                margin: 15,
                borderRadius: 10,
                borderWidth: 1,
                flexDirection: 'row',
                borderColor: '#ddd',
              }}>
              <Image
                style={{
                  borderRadius: 10,
                  borderTopLeftRadius: 0,
                  borderBottomLeftRadius: 0,
                  width: 150,
                  height: 150,
                }}
                resizeMode="cover"
                source={item.images[0]}
              />
              <View
                style={{
                  margin: 5,
                  marginLeft: 10,
                  justifyContent: 'space-evenly',
                }}>
                <Text
                  style={{
                    marginBottom: 5,
                    fontWeight: 'bold',
                    fontSize: 16,
                    marginTop: 5,
                  }}>
                  {item.service}
                </Text>
                <View
                  style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'space-around',
                  }}>
                  <View
                    style={{
                      flexDirection: 'row',
                      alignItems: 'center',
                      // paddingHorizontal: 5,
                    }}>
                    <Icon name="date-range" color="#AEACAC" size={20} />
                    <Text style={{paddingHorizontal: 5}}>{item.date}</Text>
                  </View>
                  <View
                    style={{
                      flexDirection: 'row',
                      alignItems: 'center',
                      paddingHorizontal: 5,
                    }}>
                    <Icon name="access-time" color="#AEACAC" size={20} />
                    <Text style={{paddingHorizontal: 5}}>{item.time}</Text>
                  </View>
                </View>
                <Text
                  numberOfLines={1}
                  ellipsizeMode="tail"
                  style={{marginBottom: 5, width: 160, marginTop: 5}}>
                  {item.description}
                </Text>
              </View>
            </TouchableOpacity>
          );
        }}
        keyExtractor={(item, index) => index.toString()}
      />
    );
  }
}