React中如何用Context实现多路由间帖子删除、点赞等状态同步？

核心调整方向是拆分全局状态的职责：全局只存储所有帖子的公共属性（点赞数、删除状态、内容等），不维护任何业务页面的排序、分页列表，各页面的列表逻辑完全由自己控制，渲染时再从全局拉取对应帖子的最新数据。

1. 重构全局PostsContext结构 #

将原来按用户ID分组存储帖子列表的嵌套结构，改为按帖子ID做索引的扁平化实体结构，全局仅提供操作单条帖子属性的能力，不干预任何页面的列表排序、分页逻辑：

// 新的全局状态结构
{
  // key为postId，存储全量帖子公共属性
  postEntities: {
    post1: { id: "post1", authorId: "userId1", totalLikes: 10, content: "", isDeleted: false, ... },
    post2: { id: "post2", authorId: "userId1", totalLikes: 1, ... },
    post3: { id: "post3", authorId: "userId2", totalLikes: 50, ... },
  }
}

对应的PostsProvider实现调整为：

export function PostsProvider({ children }) {
  const [state, dispatch] = useReducer(contentsReducer, {
    postEntities: {}
  });

  // 批量新增/更新帖子实体
  const addPostEntities = (posts) => {
    dispatch({ type: 'ADD_ENTITIES', payload: posts });
  };

  // 更新帖子单个属性（点赞数、删除状态等）
  const updatePostAttr = (postId, attr, value) => {
    dispatch({ type: 'UPDATE_POST_ATTR', payload: { postId, attr, value } });
  };

  // 根据ID获取有效帖子（已删除/不存在返回null）
  const getValidPostById = (postId) => {
    const post = state.postEntities[postId];
    return post && !post.isDeleted ? post : null;
  };

  return (
    <PostsContext.Provider value={{ addPostEntities, updatePostAttr, getValidPostById }}>
      {children}
    </PostsContext.Provider>
  );
}

2. 调整页面逻辑 #

两个页面各自在本地维护自己的分页ID列表，完全由接口返回结果控制，不受其他页面逻辑干扰：

个人帖子页实现示例 #

function UserPosts({ userId }) {
  const { getValidPostById, addPostEntities } = usePosts();
  // 本地维护当前页的帖子ID列表，仅由当前页的接口请求更新
  const [postIds, setPostIds] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const cursor = useRef(new Date());

  const getPosts = async (limit = 10) => { 
    setIsLoading(true);
    const { posts: fetchedPosts, newCursor } = await api.getPosts(userId, cursor.current, limit);
    // 先将拉取到的帖子存入全局实体池
    addPostEntities(fetchedPosts);
    // 仅将帖子ID按接口返回的顺序存入本地列表，完全控制分页与排序
    setPostIds(prev => [...prev, ...fetchedPosts.map(p => p.id)]);
    cursor.current = newCursor;
    setIsLoading(false);
  }

  useEffect(() => {
    getPosts();
  }, [userId]);

  // 渲染时从全局拉取最新的帖子数据，自动同步点赞、删除状态
  const renderData = postIds.map(id => getValidPostById(id)).filter(Boolean);

  return <CardList data={renderData} loading={isLoading} onEndReached={getPosts} />
}

推荐流页面实现逻辑 #

和个人页逻辑一致，仅需要把本地维护的ID列表换成推荐流的postIds即可，拉取推荐接口后同样先存实体到全局，再更新本地的ID列表。

3. 跨页面同步实现 #

• 点赞操作：调用updatePostAttr(postId, 'totalLikes', 新的点赞数)，所有用到该帖子的页面会自动拿到最新的点赞数刷新UI
• 删除操作：接口删除成功后调用updatePostAttr(postId, 'isDeleted', true)，所有页面渲染时会自动过滤掉已删除的帖子，无需额外做跨页面通知

效果验证 #

• 解决零散帖子提前展示问题：个人页的展示内容完全由本地postIds控制，首次接口请求完成前postIds为空，只会显示loading，不会出现推荐流提前存入的零散内容，分页游标完全由当前页接口控制，不会被打乱
• 解决跨页面状态同步问题：所有帖子的公共属性存储在全局，任意页面修改后全应用自动同步

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