React格式化金额千分位处理小数位时出现白屏无报错问题求助

• 渲染阶段未捕获的报错导致白屏：大概率是初始加载时accDetails还未完成接口赋值，accDetails.bal为undefined/null，调用toFixed(2)方法直接触发运行时错误，React 未配置错误边界的情况下就会直接导致页面白屏，生产环境默认不展示报错信息所以看不到具体提示。
• 自定义千分位函数存在边界问题：现有正则没有区分整数、小数部分，如果后续小数位调整为3位以上时，会错误地给小数部分也添加千分位分隔符，虽然当前用toFixed(2)不会触发，但属于潜在隐患。

方案1：使用原生API实现（最推荐，无需自行维护正则） #

直接用浏览器原生的Intl.NumberFormat格式化API，天然支持千分位+固定小数位，兼容各种边界情况，代码更简洁可靠：

// 直接封装成工具函数
const formatCurrency = (num, decimal = 2) => {
  // 先做入参兼容，非数字默认返回0.00格式
  const n = typeof num === 'number' ? num : 0
  return new Intl.NumberFormat('zh-CN', {
    minimumFractionDigits: decimal,
    maximumFractionDigits: decimal
  }).format(n)
}

业务代码调用时先做默认值兜底，避免报错：

{formatCurrency(accDetails.bal ?? 0)} Currency = {accDetails.ccy ?? ''}

方案2：优化原有自定义函数+增加兜底逻辑 #

如果要保留原有正则实现，先修复入参兼容和正则的边界问题：

const numberWithCommas = (x) => {
  // 入参转数字兜底，避免非数字传入报错
  const num = Number(x) || 0
  const str = num.toFixed(2)
  // 拆分整数和小数部分，只给整数部分加千分位
  const [integer, decimal] = str.split('.')
  return integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '.' + decimal
}

业务调用时同样加默认值兜底：

{numberWithCommas(accDetails.bal ?? 0)} Currency = {accDetails.ccy ?? ''}

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