React Hooks与Context API下新增帖子为何会覆盖原有posts状态

你遇到的posts数组被替换、历史加载数据丢失，是两个React状态开发的经典问题叠加导致的：

• 闭包捕获了过时的state引用：你将createNewPost、getPostsByUserId等业务方法直接写入useState的初始值对象中，这些方法在组件首次渲染时就被创建绑定，拿到的是组件第一次挂载时的state快照——也就是posts为空的初始状态，后续通过getPostsByUserId加载并存入state的帖子数据，这些方法根本读不到
• 状态更新逻辑依赖了闭包内的旧值：updateStatePosts中执行拼接posts数组的操作时，读取的是旧闭包里的空posts数组，最终生成的新数组自然只有刚创建的单条帖子，直接覆盖了之前已经加载完成的全量列表

• 拆分状态存储：将纯数据状态（posts、timelinePosts）和操作状态的业务方法分开维护，不要把方法塞进useState的初始值里
• 采用函数式状态更新：所有需要基于上一次状态计算新值的场景，都通过setState传入更新函数，让React返回保证最新的状态快照，彻底规避闭包过时问题
• 用useCallback包裹业务方法，保证方法引用稳定，避免不必要的组件重渲染

import { createContext, useState, useCallback } from 'react';
import { createDoc, getWhere } from '../utils/database/db';

export const PostDataContext = createContext();

const SetDataContextProvider = ({ children }) => {
    // 仅将纯数据存入基础状态
    const [state, setState] = useState({
        posts: [],
        timelinePosts: []
    });

    // 函数式更新：基于最新state完成新帖头部追加
    const updateStatePosts = useCallback((payload) => {
        setState(prevState => ({
            ...prevState,
            posts: [payload, ...prevState.posts]
        }))
    }, [])

    const createNewPost = useCallback(async (collection, payload) => {
        const doc = await createDoc(collection, payload)
        payload.id = doc?.doc?.id;
        updateStatePosts(payload);
        return doc;
    }, [updateStatePosts])

    const getPostsByUserId = useCallback(async (userId) => {
        const dataReceived = await getWhere('/posts', userId, 'userId')
        setState(prevState => ({ ...prevState, posts: dataReceived }))
    }, [])

    // 合并状态数据与操作方法，作为Context的最终暴露值
    const contextValue = {
        ...state,
        createNewPost,
        getPostsByUserId
    }

    return <PostDataContext.Provider value={contextValue}>
        {children}
    </PostDataContext.Provider>
}

export default SetDataContextProvider;

• 禁止将异步业务方法、状态操作函数直接定义在useState的初始值中：这类定义的函数会永久绑定首次渲染时的上下文，无论后续状态如何更新，函数内部读取到的状态永远是初始的空值
• 只要状态更新逻辑依赖上一次的状态值，就必须使用setState的函数式入参写法：该入参是React保证的最新状态快照，不会出现闭包读取旧值导致的状态覆盖问题
• 原实现里写入useState初始值的方法不会随组件重渲染刷新引用，自然无法拿到最新的posts数据，最终就出现了新增帖子后全量列表被单条新数据覆盖的异常

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