FlatListコンポーネントを使用してReact Nativeでアイテムのリストをレンダリングしようとしていますが、新しいデータを取得するたびに、React.memoを使用してもアイテムのwhoリストを再レンダリングします。
私のコードは次のようになります。
const data = [
{ _id: 1, text: 'Hello World' },
{ _id: 2, text: 'Hello' },
{ ... }
]
const renderItem = ({ item }) => (<Component item={item} />)
const loadMore = () => {
//Fetching data from db and adding to data array
}
<FlatList
data={data}
keyExtractor={item => item._id}
renderItem={renderItem}
onEndReached={loadMore}
removeClippedSubviews={true}
/>
Component.js
const Component = ({ item }) => {
console.log('I am rendering')
return (
<Text>{item.text}</Text>
)
}
const equal = (prev, next) => {
return prev.item.text === next.item.text
}
export default React.memo(Component, equal)
関数がトリガーされて loadMore 関数が呼び出されるたびonEndReachedに、すべての FlatList アイテムが再レンダリングされ、毎回 console.log 'レンダリング中' になり、エラーが発生します。virtualizedlist you have a large list that is slow to update
私を助けることができる人に感謝します!