[英]how can i bring more than 10 data at once by using react-native FlatList?
我有這樣的數據
singlePost?.Comments = [
0: {id: 82, content: "부모1", responseTo: null}
1: {id: 83, content: "자식1", responseTo: 82}
2: {id: 84, content: "부모2", responseTo: null}
3: {id: 85, content: "자식2", responseTo: 84}
4: {id: 86, content: "부모3", responseTo: null,}
5: {id: 87, content: "자식3", responseTo: 86}
6: {id: 88, content: "부모4", responseTo: null}
7: {id: 90, content: "자식4", responseTo: 88,}
8: {id: 91, content: "부모5", responseTo: null}
9: {id: 92, content: "자식5", responseTo: 91,}
10: {id: 93, content: "부모6", responseTo: null}
11: {id: 94, content: "자식6", responseTo: 93}
]
當我嘗試使用 FlatList 渲染我的所有數據時,第一次只渲染了 10 條數據(id:82~92),並自動重新渲染,然后渲染了所有數據。 (編號為:82~ 94)
像這樣
console.log(item)
item 0: {id: 82, content: "부모1", responseTo: null}
item 1: {id: 83, content: "자식1", responseTo: 82}
item 2: {id: 84, content: "부모2", responseTo: null}
item 3: {id: 85, content: "자식2", responseTo: 84}
item 4: {id: 86, content: "부모3", responseTo: null,}
item 5: {id: 87, content: "자식3", responseTo: 86}
item 6: {id: 88, content: "부모4", responseTo: null}
item 7: {id: 90, content: "자식4", responseTo: 88,}
item 8: {id: 91, content: "부모5", responseTo: null}
item 9: {id: 92, content: "자식5", responseTo: 91,}
item 0: {id: 82, content: "부모1", responseTo: null}
item 1: {id: 83, content: "자식1", responseTo: 82}
item 2: {id: 84, content: "부모2", responseTo: null}
item 3: {id: 85, content: "자식2", responseTo: 84}
item 4: {id: 86, content: "부모3", responseTo: null,}
item 5: {id: 87, content: "자식3", responseTo: 86}
item 6: {id: 88, content: "부모4", responseTo: null}
item 7: {id: 90, content: "자식4", responseTo: 88,}
item 8: {id: 91, content: "부모5", responseTo: null}
item 9: {id: 92, content: "자식5", responseTo: 91,}
item 10: {id: 93, content: "부모6", responseTo: null}
item 11: {id: 94, content: "자식6", responseTo: 93}
這是我的代碼
return (
<ContaiFlatListner
data={singlePost?.Comments}
keyExtractor={(item) => String(item.id)}
ListEmptyComponent={<EmptyItem />}
renderItem={({item}) => (
console.log("item:",item),
<TodoItem
item={item}
/>
)}
/>
);
所以我想要的是,當我嘗試渲染時,我想第一次渲染我的所有數據(id:82~94)
我認為這個問題發生的原因是 FlatList 帶來的數據非常慢......
那么我該如何修復我的代碼?
嘗試在 FlatList 上設置以下屬性:
initialNumToRender={a number larger than 10}
但是文檔確實詳細說明了這樣做的缺點,您應該注意https://reactnative.dev/docs/flatlist#initialnumtorender
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.