如何访问嵌套对象结构的JSON数据并在表格中展示？

你的问题核心是解构嵌套字段时路径错误：name和avatar并不是直接挂在数组元素的根节点下，而是嵌套在person对象里，所以直接从curElem里解构这两个字段会拿到undefined，导致表格显示异常。

另外还有个小问题：你把<tbody>放在了map循环里，这会导致每一行数据都生成一个独立的<tbody>，不符合HTML表格的规范，建议把<tbody>提到循环外面，只在里面渲染<tr>。

下面是两种可行的修正方案：

方案1：嵌套解构（推荐，代码更简洁） #

直接在解构时深入person对象，取出嵌套的字段：

<tbody>
  {data.map((curElem) => {
    // 嵌套解构person里的name和avatar
    const { id, person: { name, avatar }, city, email, joiningDate, role } = curElem;
    return (
      <tr key={id}>
        <td>{name}</td>
        {/* 如果avatar是图片路径，可渲染为图片标签 */}
        <td><img src={avatar} alt={name} style={{ width: '50px' }} /></td>
        <td>{city}</td>
        <td>{email}</td>
        <td>{joiningDate}</td>
        <td>{role}</td>
      </tr>
    );
  })}
</tbody>

方案2：分步解构（适合person字段较多的场景） #

先取出整个person对象，再单独解构里面的字段：

<tbody>
  {data.map((curElem) => {
    const { id, person, city, email, joiningDate, role } = curElem;
    // 从person对象里解构name和avatar
    const { name, avatar } = person;
    return (
      <tr key={id}>
        <td>{name}</td>
        <td><img src={avatar} alt={name} style={{ width: '50px' }} /></td>
        <td>{city}</td>
        <td>{email}</td>
        <td>{joiningDate}</td>
        <td>{role}</td>
      </tr>
    );
  })}
</tbody>

额外提示 #

如果data可能存在person为undefined的情况（比如接口返回异常），建议添加兜底逻辑避免报错：

// 方案1中给person添加默认空对象
const { id, person: { name, avatar } = {}, city, email, joiningDate, role } = curElem;

// 或者渲染时用可选链
<td>{person?.name}</td>

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