React FlatList渲染时item重复显示问题该如何解决？

问题根因 #

• FeedBody组件使用React.memo但未接收任何props，内部直接闭包引用外层的feedCache状态，只要外层组件重渲染，FeedBody一定会跟着重渲染，React.memo完全没有生效。
• 状态更新逻辑写在for循环内部的终止判断中，且连续触发3次状态更新，可能引发额外的重渲染。
• 未显式指定FlatList的唯一key，FlatList内部缓存可能导致旧的item没有被清理，出现重复。

修复方案 #

1. 修正FeedBody组件的props传递 #

将渲染需要的feedCache作为props传入FeedBody，让React.memo可以通过浅比较props判断是否需要重渲染，同时给FlatList添加全局key，确保数据变化时FlatList完全重置：

const FeedBody = React.memo(({ feedCache }) => {
    return (
        <FlatList
            data={feedCache}
            renderItem={({ item }) => <FeedPost item={item} />}
            keyExtractor={item => item.id}
            // 数据长度变化时强制重置FlatList，避免内部缓存渲染旧item
            key={`feed-list-${feedCache.length}`}
        />
    )
})

// 渲染时传入props
return (
    <>
        {feedLoaded && feedCache && feedReturnCache
            ? <FeedBody feedCache={feedCache} />
            : <AppLoading />
        }
    </>
)

2. 优化useEffect中的状态更新逻辑 #

把状态更新从for循环中移出来，统一在遍历结束后执行，同时修复feedMounted变量未声明的问题：

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

useEffect(() => {
    // 显式声明局部变量，避免变成全局变量
    let feedMounted = true
    server("POST", "/content/feed", {
        token: user.token,
        cachePresent: false,
        metric: "new"
    }, (data, http, error) => {
        if (!error && feedMounted) {
            const toBeStatefulFeedReturnCache = data.map(item => ({
                id: item.id,
                read: false
            }))
            // 遍历完成后统一更新状态
            setFeedCache(data) 
            setFeedReturnCache(toBeStatefulFeedReturnCache)
            setFeedLoaded(true)
        } else if (error) {
            throw error
        }
    })
    return () => {
        feedMounted = false
    }
}, [])

3. 额外校验项 #

• 确保每个item的id属性是全局唯一值，FlatList依赖keyExtractor返回的key区分不同item，如果id重复会直接导致渲染重复。
• 可以用React.memo包裹FeedPost组件，减少单个item的不必要重渲染。
• 如果renderItem逻辑依赖除data外的其他变量，需要把对应变量传入FlatList的extraData属性，保证FlatList可以正确触发更新。

内容的提问来源于stack exchange，提问作者Ethan Crabb