如果更新数据,如何更新FlatList
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如果更新数据,如何更新FlatList相关的知识,希望对你有一定的参考价值。
我获取数据的方式是在componentWillMount方法中,它在应用程序启动时呈现FlatList时工作正常,但是当我添加数据时,我想要的只是更新我的flatList。我怎么能在这里做的是代码片段:
componentWillMount() {
console.log(`componentDidUpdate`, prevProps);
const user = firebase.auth().currentUser;
if (user != null) {
const db = firebase.firestore();
const docRef = db.collection('userCheckInHistory').doc(user.uid);
docRef
.get()
.then(doc => {
if (doc.exists) {
let shopId = this.props.shopId;
let userShopHistoryData = doc.data();
let userShopPick = userShopHistoryData[shopId];
this.setState({
checkInHistory: userShopPick,
shopId: this.props.shopId
});
} else {
console.log('No such document!');
return false;
}
})
.catch(function(error) {
console.log('Error getting document:', error);
});
}
}
现在这是我的FlatList代码:
renderHistoryList() {
const sortedData = Common.getArrayByObject(this.state.checkInHistory);
if (this.state.checkInHistory !== '') {
return (
<FlatList
data={sortedData}
extraData={this.state}
keyExtractor={this._keyExtractor}
renderItem={({ item }) => (
<MyListItem
id={item}
onPressItem={this._onPressItem}
selected={!!this.state.selected.get(item)}
title={item}
/>
)}
/>
);
} else {
return <Spinner />;
}
}
答案
当您从api获取数据时,使用该数据设置您的状态。然后,如果您添加数据和setState,本机将重新呈现应用程序,您将在列表中看到您的数据。
以上是关于如果更新数据,如何更新FlatList的主要内容,如果未能解决你的问题,请参考以下文章
为啥 FlatList 在 React Native 中没有动态更新
FlatList ref scrollToIndex 不是函数