React中toFixed()一处生效一处报product未定义，如何统一格式化价格？

1. 错误原因判断 #

你的猜测完全正确。
Redux 中 productDetail 切片的初始状态下，product 为 undefined。组件首次渲染时，useEffect 中的接口请求还未返回数据，你直接在组件顶层作用域执行 const disabled = product.countInStock === 0，相当于访问 undefined 的属性，会直接抛出错误，代码根本不会执行到后续的 loading 判断分支。
而首页场景中，Product 组件是在 loading 结束、products 数组有有效值之后才被 map 渲染的，传入的 product 一定存在，因此不会报错。

修复方案 #

两种修改方式二选一即可：

• 把 disabled 的定义移动到 loading 判断的内部（也就是渲染商品详情的分支里），保证只有 product 有值时才会执行这段逻辑
• 直接给属性访问加可选链兜底：const disabled = product?.countInStock === 0，即使 product 为 undefined 也不会抛出错误，等接口数据返回后会自动更新计算结果。

2. 价格统一格式化最佳实践 #

不建议零散在各个组件中直接写 toFixed(2)，建议统一封装工具逻辑，后续修改格式只需要改一处即可：

第一步：封装全局格式化工具函数 #

在项目的工具目录新建 format.js，写入如下逻辑：

// 兜底处理非数字的价格场景，避免报错
export const formatPrice = (price, currency = '$', decimals = 2) => {
  const validPrice = Number(price) || 0
  return `${currency}${validPrice.toFixed(decimals)}`
}

第二步：全局复用 #

所有需要展示价格的地方直接引入工具函数使用即可：

import { formatPrice } from '@/utils/format'

// 调用示例
<span>{formatPrice(product.price)}</span>

如果项目中价格展示的样式也统一，可以进一步封装成通用组件：

const PriceTag = ({ value, currency = '$' }) => {
  return <span className="text-lg font-medium">{formatPrice(value, currency)}</span>
}

// 调用示例
<PriceTag value={product.price} />

额外注意事项 #

如果涉及前端金额计算，不要直接用浮点数运算避免精度丢失，可以转成分计算后再格式化，或者使用 BigInt 处理，普通展示场景以上方案足够使用。

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