在React中如何使用numberWithCommas正则正确格式化货币？

问题根源 #

白屏是因为accDetails初始值为空字符串，首次渲染时访问其bal属性得到undefined，调用toFixed方法直接抛出未捕获错误，导致React组件渲染失败。你写的格式化函数仅处理了千分位，没有做入参合法性校验，也会触发异常。

修复步骤 #

1. 修正状态初始值与渲染安全校验 #

将accDetails的初始值从空字符串改为空对象，所有访问accDetails属性的地方加可选链判断，避免数据未返回时调用方法报错：

// 初始值改为空对象
const[accDetails, setAccDetails] = useState({});

余额渲染位置修改为：

{accDetails.bal ? numberWithCommas(accDetails.bal.toFixed(2)) : ''} Currency = {accDetails?.ccy || ''}

其余accDetails.fullname、accDetails.address等属性也建议统一加?.可选链，避免数据结构不符合预期时报错。

2. 优化格式化函数 #

给原有格式化函数加入参合法性校验，避免空值/非数字值传入时触发异常：

const numberWithCommas = (x) => {
    if((!x && x !== 0) || isNaN(Number(x))) return '';
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

也可以直接使用JS内置的国际化API实现货币格式化，兼容性更好、不需要手动写正则，还可以自动适配货币符号：

const formatCurrency = (num, ccy = 'USD') => {
  if(typeof num !== 'number' || isNaN(num)) return ''
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: ccy,
    minimumFractionDigits: 2
  }).format(num)
}
// 调用时直接输出完整格式化结果，不需要单独拼接货币单位
{formatCurrency(accDetails.bal, accDetails.ccy)}

3. 补充请求异常处理 #

给fetch请求加catch分支，避免请求失败时页面无反馈：

fetch('https://financeplus.herokuapp.com/api/getaccounts/'+accNum,{
    method : 'GET',
    mode : 'cors',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
}).then((response)=>response.json()).then((responseJson)=>{
    setAccDetails(responseJson.data || {})
}).catch(err => {
    console.error('获取账户信息失败', err)
    // 可自行添加用户提示逻辑
})

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