ReactJS接收Express数据显示为数字而非JSON的问题求助

看起来你在Express和React的数据交互与渲染上踩了几个常见的坑，我来一步步帮你理清问题并修复：

一、先修复Express端的响应问题 #

你当前的响应代码res.send(JSON.stringify(JSON.parse(globalImageList)))存在明显错误：

• globalImageList是你手动push的数组，而JSON.parse()的参数必须是JSON格式的字符串，直接传入数组会抛出语法错误，导致服务器返回异常内容。

正确的做法是利用Express内置的res.json()方法，它会自动帮你把数组/对象序列化为JSON字符串，并设置正确的Content-Type: application/json响应头，无需手动处理序列化：

// 替换原来的响应代码
res.json(globalImageList);

如果一定要手动序列化（不推荐，res.json更简洁可靠），也应该去掉多余的JSON.parse：

res.send(JSON.stringify(globalImageList));

二、React端的状态与渲染修复 #

你遇到的渲染问题，核心是初始状态类型不匹配和渲染方式错误：

1. 修正初始state类型 #

你初始把apiResponse设为空字符串，但实际期望拿到的是数组。这会导致：

• 组件挂载初期调用map时，字符串的map会遍历每个字符（空字符串没内容，但后续状态更新后如果处理不及时，还是会有问题）
• 用Object.keys()遍历数组时，得到的是数组的索引（0、1、2...），所以渲染出来是数字序列拼接

把初始state改为空数组：

constructor(props) {
  super(props);
  this.state = {
    apiResponse: [], // 改为空数组，和预期的数据类型一致
    isLoading: true // 新增加载状态，优化用户体验
  };
}

2. 完善fetch请求的错误处理 #

给fetch加上错误捕获，避免网络请求失败时组件状态异常：

callAPI() {
  fetch('/api/getList')
    .then(res => {
      // 先检查响应状态是否正常
      if (!res.ok) {
        throw new Error(`HTTP error! Status: ${res.status}`);
      }
      return res.json();
    })
    .then(res => {
      this.setState({ 
        apiResponse: res, 
        isLoading: false 
      });
    })
    .catch(err => {
      console.error('获取数据失败:', err);
      this.setState({ isLoading: false });
    });
}

3. 正确渲染数组元素 #

现在apiResponse是数组，直接用map遍历每个对象，渲染你需要的内容即可。注意要给每个遍历项加唯一的key属性：

render() {
  const { apiResponse, isLoading } = this.state;

  // 加载状态提示
  if (isLoading) {
    return <div>加载中...</div>;
  }

  // 空数组提示
  if (apiResponse.length === 0) {
    return <div>暂无内容</div>;
  }

  // 遍历渲染每个元素
  return (
    <div className="image-list">
      {apiResponse.map((item, index) => (
        <div key={index} className="image-item">
          <img src={item.image} alt="帖子预览" />
          <a 
            href={item.post} 
            target="_blank" 
            rel="noopener noreferrer"
          >
            查看帖子
          </a>
        </div>
      ))}
    </div>
  );
}

为什么之前的写法会出错？ #

• 直接渲染{this.state.apiResponse}报错：React不允许直接渲染对象/数组作为子元素，必须明确渲染每个属性或转换为字符串
• 用(this.state.apiResponse).map()报错：因为初始状态是字符串，字符串没有map方法，改为初始空数组后就不会有这个问题
• Object.keys(this.state.apiResponse).map(i => i)显示数字：数组的Object.keys()返回的是索引字符串（"0"、"1"等），所以map后会把这些索引拼接起来显示

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