React帖子详情页异常：控制台数据正常但页面无内容渲染

嘿，我看了你的代码，控制台能拿到正确数据但页面没内容，大概率是这几个地方出问题了：

• JSX标签用了HTML实体而非原生标签：你代码里的<div>、<h2>这些都是HTML转义字符，React完全识别不了这些，得换成正常的<div>、<h2>标签才行——这是最可能导致页面空白的核心原因。
• useEffect依赖缺失：你的useEffect依赖数组是空的，但fetchItem里用到了match.params.id，如果路由参数发生变化，组件不会重新发起请求。建议把match.params.id加到依赖数组里，同时用useCallback包裹fetchItem，避免不必要的重渲染。
• 初始状态的健壮性优化（可选）：初始时item是空对象，item.title会是undefined，你可以加个加载状态或者用可选链item?.title来避免潜在的渲染警告。

修复后的代码参考：

import React, { useState, useEffect, useCallback } from "react";

function ProductDetail({ match }) {
  const [item, setItem] = useState({});
  const [loading, setLoading] = useState(true); // 可选：添加加载状态

  const fetchItem = useCallback(async () => {
    try {
      const data = await fetch(`http://amb.local/posts/${match.params.id}`);
      const fetchedItem = await data.json();
      console.log(fetchedItem);
      setItem(fetchedItem);
      setLoading(false);
    } catch (error) {
      console.error("获取帖子详情失败：", error);
      setLoading(false);
    }
  }, [match.params.id]);

  useEffect(() => {
    fetchItem();
    console.log(match);
  }, [fetchItem]);

  if (loading) {
    return <div>加载中...</div>; // 可选：显示加载状态
  }

  return (
    <div>
      <h2>Post detail</h2>
      <h3>{item.title}</h3>
    </div>
  );
}

export default ProductDetail;

先把JSX的实体标签改成正常标签，这一步基本就能让页面渲染出内容了，其他优化是为了让组件更稳定健壮。

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