JavaScript解析JSON字符串提取itemName的JSX内联函数实现问题

最优内联实现方案 #

r.invoice_details是JSON格式字符串，需要先解析为对象再取对应字段，同时要兼容异常场景避免页面报错，完整写法如下：

{
  id: "itemName",
  label: "Item",
  customCell: (r, i) => {
    return <td key={`${i}-itemName`}>
      {
        (() => {
          try {
            const detailObj = JSON.parse(r.invoice_details)
            return detailObj.itemName ?? '-'
          } catch(err) {
            return '-' // 解析失败时的兜底展示内容可自定义
          }
        })()
      }
    </td>;
  }
},

补充说明 #

• 用立即执行函数（IIFE）实现内联逻辑，无需额外定义外部函数，符合内联写法要求
• 新增try/catch容错逻辑：避免返回的JSON格式异常、字段缺失等情况导致页面渲染崩溃，生产环境适用性更强
• 空值合并运算符??兼容itemName为空的边界场景，兜底内容可根据业务需求调整
  如果可以100%确认r.invoice_details的返回格式稳定、itemName字段一定存在，可以用极简写法：

{JSON.parse(r.invoice_details).itemName}

注意：极简写法无容错，仅适合完全可控的内部场景使用

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