React Hooks配合Firebase Firestore使用时状态更新无法获取旧值问题

• 核心问题是闭包陷阱：你在空依赖的useEffect中调用loadSession，此时loadSession内部捕获的state永远是组件初次渲染时的默认状态值。后续state更新不会影响这两个onSnapshot回调里拿到的state，所以你每次执行setState({...state, xxx})都是基于初始默认值展开，自然会出现更新session就丢失users、更新users就丢失session的互相覆盖问题。
• 拆分为多个独立useState能正常运行的原因：拆分后你不需要依赖其他状态的当前值做展开，直接更新对应状态即可，规避了闭包旧值的影响。

不需要拆分状态，只要把setState的写法改为函数式更新即可，函数式更新拿到的上一个状态永远是最新值，不受闭包限制：

const unsubSession = db.collection(COLLECTION_REF).doc(sessionId)
    .onSnapshot((snapshot) => {
        const session = snapshot.data() as ISession;
        setState(prevState => ({
            ...prevState,
            session
        }));
    });

const unsubUsers = db.collection(`${COLLECTION_REF}/${sessionId}/users`)
    .onSnapshot((querySnapshot) => {
        const users:IUser[] = [];
        querySnapshot.forEach((doc) => {
            users.push(doc.data() as IUser)
        });
        setState(prevState => ({
            ...prevState,
            users
        }));
    });

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