Блог

Когда я визуализирую свой плоский список, кажется, что в нем дублируются элементы (у feedCache есть один индекс, и он будет отображать данные для этого индекса дважды). Вот код для плоского списка:

 const FeedBody = React.memo(() => {
    return (
        <FlatList
            data={feedCache}
            renderItem={({ item }) => {
                return (
                    <FeedPost
                        item={item}
                    />
                )
            }}
            keyExtractor={item => item.id}
        />
    )
})
return (
    <>
        {feedLoaded amp;amp; feedCache amp;amp; feedReturnCache
            ? <FeedBody />
            : <AppLoading />
        }
    </>
)
 

В верхней части документа, в эффекте использования, я получаю данные из API и записываю части в feedCache и feedReturnCache. Как только это завершится, для feedLoaded будет установлено значение true, и тело канала предположительно будет отрисовано. Несмотря на это, я убежден, что компонент FeedBody все еще перерисовывается из-за обновлений состояния. Это приводит к дублированию элементов внутри плоского списка. Есть ли способ исправить/предотвратить это?

Любая помощь будет признательна, спасибо.

(Код эффекта использования)

 const [feedLoaded, setFeedLoaded] = useState(false)
const [feedCache, setFeedCache] = useState(null)
const [feedReturnCache, setFeedReturnCache] = useState(null)

useEffect(() => {
    feedMounted = true
    server("POST", "/content/feed", {
        token: user.token,
        cachePresent: false,
        metric: "new"
    }, (data, http, error) => {
        if (!error) {
            const toBeStatefulFeedReturnCache = new Array()
            for (let i = 0; i < data.length; i  ) {
                toBeStatefulFeedReturnCache.push({
                    id: data[i].id,
                    read: false
                })

                if (i   1 === data.length) {
                    if (feedMounted) {
                        setFeedCache(data) 
                    setFeedReturnCache(toBeStatefulFeedReturnCache)
                        setFeedLoaded(true)
                    }
                }
            }
        } else {
            throw error
        }
    })
    return () => {
        feedMounted = false
    }
}, [])
 

Попробуйте исправить дублирование в массиве с помощью набора