列表项重复问题

Question

当我渲染我的flatlist时，它似乎复制了它里面的项目(feedCache有一个索引，它会为这个索引渲染两次数据)。下面是flatlist的代码:

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

在文档的顶部，在useEffect中，我从API获取数据并将部分写入feedCache和feedReturnCache。一旦完成，feedLoaded被设为true, feed主体就会被渲染。尽管如此，我确信由于状态更新，FeedBody组件仍然在重新渲染。这将导致平面列表内的项重复。有办法解决/防止这种情况吗?

请帮忙，谢谢。

(useEffect代码)

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
}
}, [])

Answer 1

尝试使用set

修复数组中的重复