Flatlist项目重复问题

Question

当我渲染我的平面列表时，它似乎在其中重复了项目（feedCache 有一个索引，它会为这个索引渲染两次数据）。这是平面列表的代码：

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 组件由于状态更新仍在重新渲染。这会导致平面列表中的项目重复。有没有办法解决/防止这种情况？

任何帮助将不胜感激，谢谢。

（使用效果代码）

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 修复数组中的重复项