ReactJS中Firestore关联用户与帖子集合数据渲染异常如何修复？

问题根因 #

• 你直接修改同一个posts数组引用后调用setUserData，React 浅比较检测到数组引用未变化时会跳过渲染，或导致更新异常
• 每个帖子的onSnapshot异步回调触发时机不确定，直接往共享的posts数组中push数据，多次setUserData调用会出现状态覆盖问题
• 未对快照监听器做清理，存在内存泄漏风险

修复方案 #

1. 调用setUserData时使用函数式更新，确保每次都基于最新的状态生成新的数组，不依赖外部变量
2. 存储所有监听器的取消函数，组件卸载时统一调用清理

修复后代码如下：

export default function App () {
    const [userData, setUserData] = useState([]);
    console.log('this is userData:', userData);

    useEffect(() => {
        // 存储所有监听器的取消函数
        const unsubscribes = [];
        const userUnsubscribe = db.collection('user').doc('idUser').onSnapshot((documentSnaphot) => {
            // 每次用户数据更新先清空原有帖子数据，同时清理旧的帖子监听器
            setUserData([]);
            unsubscribes.forEach(unsub => unsub());
            unsubscribes.length = 0;

            const userPosts = documentSnaphot.data().userPosts;
            for (let id in userPosts) {
                const postUnsubscribe = db.collection('post').doc(id).onSnapshot((docSnapshot) => {
                    // 用函数式更新，每次生成新的数组引用
                    setUserData(prev => [...prev, docSnapshot.data()]);
                })
                unsubscribes.push(postUnsubscribe);
            }
        })
        unsubscribes.push(userUnsubscribe);

        // 卸载时清理所有监听器
        return () => {
            unsubscribes.forEach(unsub => unsub());
        }
    }, []);

    return (
       <>
        {userData.map((post, index) => {
            console.log(index, post);
            // 这里替换成你实际的渲染逻辑，key优先用帖子唯一ID，不要用index
            return <div key={index}>{JSON.stringify(post)}</div>
        })}
       </>
    )
}

内容的提问来源于stack exchange，提问作者Olland Timisela