0

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

私を助けることができる人に感謝します!

4

1 に答える 1