Question

我从firebase实时获取数据并将其放到FlatList中，当我从控制台“ Firebase”删除时，它很好地从屏幕上的列表中删除，但是数组“ Data”中的最后一项不能删除我不知道为什么！

我使用了onRefresh道具，但对我没有帮助，因为我们都知道数据库是实时的，并且当我们添加任何项目时，它就位于最后一个而不刷新它，因此它也不能与最后一个项目一起使用加载卡住而没有重新呈现FlatList

虽然我从数据库获取数据时使用.once（'value'），但刷新工作有效，但是在删除最后一项后刷新时，加载刷新卡住了并且无法消失最后一项

那我该如何解决这个问题？

这是我的代码

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

Answer 1

重新激活单位列表的密钥是extraData。只需将其值更改为其他值，就会触发平面列表重新呈现。为简单起见，将布尔值传递给extraData。每次您要重新激活单位列表时，只需切换extraData

的值

空数据后，我不能重新渲染FlatList吗？

1 个答案: