页面已渲染但useEffect未执行fetchPostData问题求助

你遇到的问题是挂载时useEffect内的fetchPostData完全未执行，同时代码中存在无效逻辑干扰，以下是具体修复步骤：

1. 移除无用的useEffect #

你第一个useEffect逻辑冗余且无实际作用：

useEffect(() => {
  console.log("setNoComment");
  setNoComment(true);
}, [noComment]);

该useEffect依赖noComment，但内部仅将其设置为初始值true——React在setState传入与当前值相同的内容时，不会触发组件重渲染，所以这个useEffect只会执行一次，对业务逻辑毫无帮助，直接删除即可。

2. 修复数据获取的useEffect #

你的第二个useEffect依赖数组为空，但内部使用了postId（来自useParams），这会导致：

• 若postId在组件挂载时未及时解析完成，fetchPostData无法触发；
• 路由参数postId变化时，无法重新获取对应数据。

修改后的代码： #

useEffect(() => {
  // 避免postId为空时发起无效请求
  if (!postId) return;

  const fetchPostData = async () => {
    console.log("fetchPostData pre");
    try {
      const postData = await callPostUrl(postId);
      const commentsData = await callComments(postId);
      setPost(postData);
      setComments(commentsData);
      // 根据评论数据自动判断是否显示空白评论组件
      setNoComment(Object.keys(commentsData).length === 0);
    } catch (error) {
      console.error("数据加载失败:", error);
      // 可在此添加错误提示的UI逻辑
    }
  };
  fetchPostData();
}, [postId]); // 将postId加入依赖数组，确保参数变化时重新请求

额外优化：简化noComment状态维护 #

你可以直接通过comments数据的长度判断是否显示空白评论组件，无需单独维护noComment状态，进一步简化代码：

// 删除noComment相关的useState和useEffect
// 渲染时直接判断
{Object.keys(comments).length === 0 ? <BlankComment /> : <CommentBox comments={comments} />}

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