React中如何条件渲染JSON属性：仅属性存在时渲染并解决map报错

你的代码有两个致命问题导致报错：

• 判断逻辑写反：你写的判断条件是if (!record.Attachments)，意思是「当Attachments属性不存在时才进入分支执行map」，刚好和需求相反，不存在Attachments的时候去调用undefined.map()必然抛错。
• JSX语法错误：JSX的{}插值里不能直接写if声明语句，你写的这段if逻辑根本不会被React解析执行，相当于无论Attachments是否存在，都会尝试执行map调用。

推荐用可选链+逻辑短路的写法，简洁且安全，修复后的代码如下：

{data.map((record) => (
  <tr>
    <td>{record.UniqueName}</td>
    <td>{record.StatusString}</td>
    {record.Attachments?.map((line) => (
      <>
        <td>{line.uniqueAttachmentId}</td>
        <td>{line.Filename}</td>
        <td>{line.id}</td>
      </>
    ))}
  </tr>
))}

写法说明 #

• 用record.Attachments?.map()可选链语法：当Attachments为undefined/null时，会直接返回undefined，不会执行后续map调用，完全避免抛错；当Attachments是有效数组时才会正常遍历渲染。
• 去掉了多余的嵌套React.Fragment，空标签<></>是Fragment的简写，代码更简洁。
• 利用React内置渲染规则：渲染过程中遇到undefined、null、false值会直接跳过不输出，刚好匹配「无Attachments属性时不渲染对应内容」的需求。

如果需要兼容不支持可选链的旧构建环境，可以换用显式真值判断的写法：

{data.map((record) => (
  <tr>
    <td>{record.UniqueName}</td>
    <td>{record.StatusString}</td>
    {record.Attachments && record.Attachments.map((line) => (
      <React.Fragment key={line.uniqueAttachmentId}>
        <td>{line.uniqueAttachmentId}</td>
        <td>{line.Filename}</td>
        <td>{line.id}</td>
      </React.Fragment>
    ))}
  </tr>
))}

补充提示：遍历列表生成元素时，记得给最外层遍历项加唯一key属性，示例里用附件自带的uniqueAttachmentId作为key即可，避免React抛出渲染性能警告。

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