React渲染MongoDB $numberDecimal字段返回NaN/[object Object]问题

budget字段是MongoDB返回的Decimal128类型扩展JSON结构，实际值为嵌套对象{"$numberDecimal": "600.00"}，并非JS原生数值类型，直接对这个对象调用数值方法、做类型转换，就会出现[object Object]或者NaN的异常结果。

直接渲染字符串值 #

如果不需要额外做数值计算、格式化，直接读取嵌套属性里的字符串值即可：

{data.map((camp, index) => {
  return (
    <tr key={index}>
      <td colSpan={5}>{camp.campaignName}</td>
      <td>$140 / {camp.budget.$numberDecimal}</td>
      <td>Active</td>
      <td><Button>Edit</Button></td>
    </tr>
  )
})}

需要数值格式化/计算时先做类型转换 #

如果要调用toLocaleString()等数值专属方法，先取出嵌套的字符串值转为Number类型再操作：

{data.map((camp, index) => {
  const budgetNum = Number(camp.budget.$numberDecimal)
  return (
    <tr key={index}>
      <td colSpan={5}>{camp.campaignName}</td>
      <td>$140 / {budgetNum.toLocaleString('en-US', { minimumFractionDigits: 2 })}</td>
      <td>Active</td>
      <td><Button>Edit</Button></td>
    </tr>
  )
})}

如果项目里这类Decimal类型字段较多，可以在接口返回数据后做一次统一字段清洗，提前把所有$numberDecimal结构转成普通数值，后续业务逻辑、页面渲染就不需要重复写嵌套取值逻辑。

注意：不要直接对camp.budget对象本身做Number()转换，对象转数字的结果固定为NaN，必然无法得到预期值。

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