React环境下解析JSON字符串为对象并渲染数据表格的实现问题

无法正常解析、渲染表格的核心原因有两个：

1. 后端接口返回的内容做了两次JSON序列化：给出的返回样例最外层带引号，本质是「内容为JSON数组的字符串」，调用res.json()仅完成了第一层反序列化，拿到的data是字符串类型，不是可直接遍历、读取属性的JS数组，这时候直接访问属性会得到undefined，错误位置调用JSON.parse也会抛出格式错误。
2. 原有fetch的Promise链式调用括号位置错误，把第二层then写到了res.json()的调用内部，逻辑链路异常。

1. 修复数据解析逻辑 #

拿到接口响应后，先判断解析结果的类型，如果是字符串就额外做一次JSON.parse，拿到真正的业务数据数组再存入state。

2. 替换渲染逻辑为表格 #

移除原来的pre标签直接打印字符串的写法，用标准table标签遍历数据渲染明细，给列表项加key属性（有业务唯一id优先用id，演示场景暂时用索引替代）。

import { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch("/data")
      .then((res) => res.json())
      .then((data) => {
        // 兼容后端二次序列化的返回格式
        let realData = data;
        if (typeof data === 'string') {
          realData = JSON.parse(data);
        }
        setItems(realData);
      })
      .catch(err => {
        console.error('数据获取解析失败:', err);
      });
  }, []);

  return (
    <div className="App">
      <table border="1" cellPadding="8">
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
          </tr>
        </thead>
        <tbody>
          {items.map((item, index) => (
            <tr key={index}>
              <td>{item.name}</td>
              <td>{item.age}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default App;

• 如果可以修改后端代码，建议调整后端序列化逻辑，直接返回数组格式的JSON，不需要额外把数组转成字符串再序列化一次，前端就可以去掉二次parse的兼容逻辑。
• 实际业务场景下建议给表格项用数据自带的唯一id作为key，不要用索引，避免列表动态更新时出现渲染异常。

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