ReactJS中用map函数展示API数据失败？如何解决UI渲染问题

你的核心问题是API返回的是单个对象，不是数组，但你用了针对数组的map方法和length判断，导致UI无法渲染数据。

具体问题点 #

1. state初始化错误：你用useState("")把初始值设为字符串，但API返回的是对象，类型不匹配。
2. 数据存在判断错误：dream.length > 0只适用于数组/字符串，单个对象没有length属性，这个判断永远为false。
3. 错误使用map：map是数组的方法，单个对象不能用map遍历。

修正后的代码 #

const Details = () => {
  const accessToken = localStorage.getItem("accessToken");
  const { dreamid } = useParams();
  // 初始化state为null，对应单个对象的初始状态
  const [dream, setDream] = useState(null);

  const fetchDreamData = async () => {
    try {
      const response = await axios.get(`/dreams/api/user-dreams/${dreamid}`, {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      });
      // 直接存入单个对象
      setDream(response.data);
    } catch (error) {
      console.error("获取数据失败:", error);
    }
  };

  useEffect(() => {
    fetchDreamData();
  }, []);

  return (
    <div>
      {/* 判断对象是否存在，再渲染内容 */}
      {dream && (
        <div>
          <h3>{dream.dream_title}</h3>
          <p>{dream.dream_story}</p>
          <p>记录时间: {dream.dream_datetime}</p>
        </div>
      )}
      {/* 可选：加载状态提示 */}
      {!dream && <p>加载中...</p>}
    </div>
  );
};

export default Details;

关键修改说明 #

• state初始化改为useState(null)，明确存储单个对象的初始状态。
• 数据判断用dream &&，确保对象存在后再访问属性，避免报错。
• 直接渲染对象的各个属性，不用map遍历。
• 增加了try/catch捕获请求错误，方便调试。

内容的提问来源于stack exchange，提问作者Shashimal Kawinda Wanninayake