javascript - 空数据后无法重新渲染 FlatList?
问题描述
我从firebase实时获取数据并将其放入FlatList,当我从控制台“Firebase”中删除它时,它会很好地从屏幕中的列表中删除,但无法删除数组“数据”中的最后一项我不不知道为什么!
我使用了 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()}
/>
);
}
}
解决方案
重新激活 flatlist 的关键是extraData
. 只需将其值更改为其他值,它将触发平面列表重新渲染。为简单起见,将布尔值传递给 extraData。每次您想重新激活平面列表时,只需切换extraData
推荐阅读
- timer - 如何在我的游戏中添加一个在我的角色死亡时不会重置的计时器
- mysql - Pandas to_sql 在追加到 mysql 表时丢弃行
- php - 当我在 html 中提交表单时,它被发送到 php 处理器,除了我的浏览器显示 500 错误
- python - 覆盖具有相同名称的图像 - Django
- r - 通过列名列表按多列对数据框进行排序
- swift - 如何从 Firebase 中检索手动输入的数据?
- javascript - 重定向 URL 不起作用并获得 No 'Access-Control-Allow-Origin' 标头错误
- css - 我应该在 CSS 中使用什么来在导航栏中的水平列表项之间创建空格?
- python-3.x - 如何在打开下一个新标签之前关闭硒中自动打开的标签?
- javascript - 有没有办法让 Regex 函数检查名字和姓氏?