React+Context API+React Hook Form提交帖子无法立即置顶问题求助

问题根源 #

你遇到的差异是因为前端新增帖子的排序逻辑和后端返回列表的排序逻辑不一致：

• 在PostsContext.tsx的reducer中，ADD_POST动作是将新帖子追加到数组末尾：

case 'ADD_POST':
  return { posts: [...state.posts, action.payload] }

• 刷新页面后，后端接口返回的帖子列表应该是按created_at倒序（最新帖子在顶部）返回的，所以新帖子会出现在列表最前面。

修复方案 #

修改PostsContext.tsx中ADD_POST的处理逻辑，将新帖子插入到数组开头，和后端返回的排序规则对齐：

const reducer = (state: PostsState, action: PostsAction) => {
  switch (action.type) {
    case 'SET_POSTS':
      return { posts: action.payload }
    // 修改这里，把新帖子放在数组最前面
    case 'ADD_POST':
      return { posts: [action.payload, ...state.posts] }
    default:
      return state
  }
}

额外说明 #

如果后端返回的列表排序规则不是按created_at倒序，建议统一前后端的排序逻辑（比如都按created_at降序或升序），避免出现前端显示和后端数据不一致的情况。

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