React组件中解析嵌套JSON生成动态表格的问题求助

在React组件中解析嵌套JSON，想把表头存入header变量、数据值存入table变量来生成表格，但解析时遇到嵌套数组显示异常的问题。后端返回的JSON结构、当前使用的代码如下，当前输出中address和phone列显示为[object Object]这类无效内容，仅email列能正常展示拼接结果。

当前使用的代码 #

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

const jsonData = [
  {
    "name": "John",
    "age": 30,
    "address": [
      {
        "street": "123 Main St",
        "city": "New York",
        "state": "NY",
        "zipcode": "10001",
      },
    ],
    "phone": [
      {
        "type": "home",
        "number": "123-456-7890",
      },
      {
        "type": "work",
        "number": "111-222-3333",
      },
    ],
    "email": ["john@example.com", "john.doe@example.com"],
  },
];

const App = () => {
  const [rows, setRows] = useState([]);

  const data = jsonData[0];
  const keys = Object.keys(data);
  const values = Object.values(data);

  const rowsData = keys.map((key, index) => {
    return {
      "key": key,
      "value": Array.isArray(values[index])
        ? values[index].join(', ')
        : values[index],
    };
  });

  useEffect(() => {
    setRows(rowsData);
  }, []);

  return (
    <table>
      <thead>
        <tr>
          <th>Key</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        {rows.map((row, index) => (
          <tr key={index}>
            <td>{row.key}</td>
            <td>{row.value}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default App;

当前输出效果 #

表格中name、age显示正常，但address列显示[object Object]，phone列显示[object Object], [object Object]，仅email列正常展示两个邮箱地址的拼接结果。

方案一：修改前端解析逻辑，处理嵌套数据 #

问题根源是直接用join(', ')处理对象数组时，对象会被强制转为[object Object]字符串。需要针对数组元素类型做区分处理：

优化后的代码 #

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

const jsonData = [
  {
    "name": "John",
    "age": 30,
    "address": [
      {
        "street": "123 Main St",
        "city": "New York",
        "state": "NY",
        "zipcode": "10001",
      },
    ],
    "phone": [
      {
        "type": "home",
        "number": "123-456-7890",
      },
      {
        "type": "work",
        "number": "111-222-3333",
      },
    ],
    "email": ["john@example.com", "john.doe@example.com"],
  },
];

// 处理嵌套值的工具函数
const formatValue = (value) => {
  if (Array.isArray(value)) {
    return value.map(item => {
      // 数组元素为对象时，转为键值对字符串；否则直接返回原内容
      if (typeof item === 'object' && item !== null) {
        return Object.entries(item).map(([k, v]) => `${k}: ${v}`).join(', ');
      }
      return item;
    }).join(' | '); // 用竖线区分不同数组项，提升可读性
  }
  return value;
};

const App = () => {
  const [rows, setRows] = useState([]);

  useEffect(() => {
    const data = jsonData[0];
    // 改用Object.entries直接遍历键值对，避免索引对应错误
    const rowsData = Object.entries(data).map(([key, value]) => ({
      key,
      value: formatValue(value)
    }));
    setRows(rowsData);
  }, []);

  return (
    <table border="1" cellPadding="8">
      <thead>
        <tr>
          <th>Key</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        {rows.map((row, index) => (
          <tr key={index}>
            <td>{row.key}</td>
            <td>{row.value}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default App;

优化说明 #

• 新增formatValue工具函数，针对性处理嵌套数据：对象转为键: 值格式，数组项用|分隔
• 改用Object.entries遍历键值对，避免keys和values索引不匹配的潜在问题
• 给表格添加基础样式，提升可读性

方案二：调整后端JSON结构（若允许修改） #

如果可以协调后端调整返回格式，让数据更适配表格展示：

• 将address从对象数组改为单个对象（若用户仅一个地址）：

  "address": {
    "street": "123 Main St",
    "city": "New York",
    "state": "NY",
    "zipcode": "10001"
  }
  

• 将phone的对象数组转为键值对形式：

  "phone": {
    "home": "123-456-7890",
    "work": "111-222-3333"
  }
  

• 保持email的数组形式不变

调整后前端解析逻辑可大幅简化，直接处理对象为键: 值字符串，数组直接拼接即可。

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