Node.js搭建REST API向React传Mock数据并渲染列表问题求助

首先，你的Node.js后端代码是完全没问题的——它已经正确返回了包含博客文章对象的数组，不需要修改。问题出在React前端的渲染逻辑上，我来一步步帮你修正：

问题根源 #

你在React里尝试直接渲染整个item对象（<h1 key={index}>{item}</h1>），但React无法直接渲染JavaScript对象，这就是你看到错误的核心原因。另外，用index作为key虽然能勉强运行，但不是最佳实践，最好用数据里唯一的id来提升列表渲染性能。

修正后的React代码 #

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

const PostList: React.FC = () => {
  // 给state加上类型注解，避免属性拼写错误（可选但推荐）
  const [items, setItems] = useState<{id: number, heading: string, text: string}[]>([]);

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

  const fetchItems = async () => {
    try {
      const response = await fetch("http://localhost:3001/api/posts");
      // 新增：检查请求是否成功，避免解析失败的JSON
      if (!response.ok) {
        throw new Error(`请求失败！状态码: ${response.status}`);
      }
      const fetchedItems = await response.json();
      setItems(fetchedItems);
    } catch (error) {
      console.error("获取博客数据出错:", error);
    }
  };

  return (
    <div className="post-container">
      {items.map((item) => (
        // 用唯一的id作为key，替代index
        <div key={item.id} className="post-card">
          {/* 渲染对象的具体属性，而不是整个对象 */}
          <h2>{item.heading}</h2>
          <p>{item.text}</p>
        </div>
      ))}
    </div>
  );
};

export default PostList;

关键修改说明 #

1. 正确渲染对象属性：不再直接把item塞到标签里，而是访问它的heading和text属性，这样React能正常渲染字符串内容。
2. 优化key值：用每个文章的id作为key，比index更稳定，尤其是未来列表有增删操作时，能避免不必要的组件重渲染。
3. 增强错误处理：增加了response.ok检查，确保请求成功后再解析JSON，能更清晰地排查网络或服务器端的问题。
4. 类型注解优化：给useState加上类型定义，让TypeScript帮你检查数据结构，提前发现属性拼写错误之类的小问题。

验证步骤 #

1. 确保Node.js服务器在3001端口正常运行（执行node 你的服务器文件名.js）。
2. 启动React应用，访问渲染PostList的页面，就能看到正确展示的博客文章列表了。

如果还有问题，可以打开浏览器开发者工具（F12）：查看Network标签确认请求是否成功，Console标签查看是否有报错信息。

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