useEffect监听postsCount变化时postList重渲染失效问题排查

你现在的代码有三个关键错误，直接导致功能不生效：

• 违反React基本实践，把JSX元素直接存在state中。你在useEffect里调用setPostsList生成列表JSX时，这个JSX会捕获当前渲染周期里posts状态的闭包值，后续就算postsCount变化触发effect重跑，只要posts状态本身没更新，生成的还是旧列表；就算posts更新了，把渲染生成的UI存在state里也会导致很多不可预期的渲染问题，React官方明确不推荐这种写法。
• 手动通过document.getElementById绑定DOM事件不可靠。第三方Tab组件默认可能懒渲染非激活标签页的菜单和内容，你第一次执行绑定事件的effect时，id为postsTab的DOM很可能还没挂载，拿到null自然绑定失败；再加你没给事件绑定写清理逻辑，handlePost每次渲染都会重新生成引用，会导致effect反复解绑重绑事件，造成内存泄漏。
• 数据源重复维护且不同步。你同时在组件本地用useState存了一份posts，又在Redux里存了一份帖子列表，删除帖子时你只更新了Redux里的数据，本地的posts状态根本没同步修改，渲染用的数据源从根上就是旧的。

直接按下面的逻辑改，不需要绕弯用effect存JSX、手动绑DOM事件：

1. 删掉用来存JSX的postList状态，列表渲染逻辑直接写在组件渲染流程中，数据源变化React会自动触发重渲染
2. 删掉手动绑定DOM事件的逻辑，直接用Tab组件自带的onTabChange回调处理标签切换逻辑，不需要等DOM挂载
3. 去掉本地重复维护的posts状态，直接用Redux中存储的帖子列表作为唯一渲染数据源，避免两份数据不同步
4. 调整删除逻辑的执行顺序，等删除接口请求成功后再更新前端状态，避免接口报错时UI和后端数据不一致

修复后代码 #

父组件Tabs #

function Tabs() {
  const dispatch = useDispatch();
  // 直接从Redux取唯一数据源，去掉本地重复的posts状态
  const posts = useSelector((state) => state.posts.content);
  const { refetch: refetchPosts } = useQuery(FETCH_POSTS_QUERY, { manual: true });

  // 用useCallback包裹标签点击逻辑，保证引用稳定
  const handlePostTabClick = useCallback(async () => {
    const { data: { getPosts: postData }} = await refetchPosts();
    dispatch(postActions.getPostsReducer(postData));
  }, [dispatch, refetchPosts]);

  // 直接在panes配置里写渲染逻辑，不要把JSX存进state
  const panes = [
    { 
      menuItem: { name: "Posts", id: "postsTab", key: "posts" }, 
      render: () => (
        <Tab.Pane>
          <Grid>
            <Grid.Column>Title</Grid.Column>
            {posts.map((post) => (
              <AdminPostsList key={post.id} postId={post.id} />
            ))}
          </Grid>
        </Tab.Pane>
      )
    }
  ];

  // 用组件自带的回调处理标签切换，不用手动找DOM绑事件
  return (
    <Tab 
      panes={panes} 
      onTabChange={(_, data) => {
        // 按自己实际的标签顺序调整判断，Posts是第一个标签就判断activeIndex为0
        if(data.activeIndex === 0) handlePostTabClick();
      }} 
    />
  );
}

子组件AdminPostsList #

function AdminPostsList({ postId }) {
  const dispatch = useDispatch();
  const [deletePost] = useMutation(DELETE_POST_MUTATION, { variables: { postId } });

  const deletePostHandler = async () => {
    try {
      // 等接口删除成功再更新前端状态，避免数据不一致
      await deletePost();
      dispatch(postActions.deletePost(postId));
    } catch (err) {
      console.error('帖子删除失败', err);
      // 这里可以加错误提示逻辑
    }
  };

  return <Button icon="delete" onClick={deletePostHandler} />;
}

Reducer代码 #

const PostSlice = createSlice({
  name: "storePosts",
  initialState: {
    content: [],
    count: 0,
  },
  reducers: {
    getPostsReducer: (state, action) => {
      state.content = action.payload;
      state.count = action.payload.length;
    },
    deletePost: (state, action) => {
      const deleteId = action.payload;
      state.content = state.content.filter((post) => post.id !== deleteId);
      // 直接取过滤后的数组长度，比手动count--更准确，避免异常场景下计数错误
      state.count = state.content.length;
    }
  },
});

改完之后，删除帖子时Redux里的帖子列表会实时更新，组件直接订阅Redux的最新数据，会自动重渲染移除被删的帖子，不需要额外用effect监听count手动触发更新；标签点击事件用组件原生回调，也不会出现DOM没挂载绑不上事件的问题。

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