TypeError: props.price.toFixed is not a function报错如何解决

报错根因 #

toFixed 是Number原型上的方法，只有合法数字类型才能调用。你认为props.price是数字类型大概率是调试时取到了渲染后期的正常值，忽略了首次渲染/异常状态下的非数字情况，常见场景如下：

• 父组件给price设置的初始值不是数字，比如初始为null、undefined、空字符串''，后续异步接口返回后才更新为数字，首次渲染时就会触发报错
• props.price传入前经过计算产生了NaN，NaN虽然用typeof判断是number类型，但不属于合法数字，无法调用toFixed方法
• 传入的是字符串形式的数字，比如"12.5"，typeof判断是string，也无法调用该方法

快速排查方法 #

在调用toFixed的代码前加入日志，打印报错瞬间的实际值和类型：

console.log('price类型：', typeof props.price, 'price值：', props.price)

触发报错时看控制台输出的内容，就能确认到底是哪种场景导致的问题。

解决方案 #

你可以任选下面一种方法修复：

方案1：增加类型转换+兜底逻辑 #

在调用toFixed前先把值转为合法数字，异常情况兜底为0：

Trenutna cena: <strong>{(Number(props.price) || 0).toFixed(2)}</strong>

方案2：给props.price设置默认值 #

可以用函数参数默认值，或者用propTypes校验+默认值：

// 函数组件参数默认值写法
const buildControls = (props = { price: 0 }) => (
  // 原有组件逻辑
)

// 或者用propTypes设置默认值
import PropTypes from 'prop-types'
buildControls.defaultProps = {
  price: 0
}
buildControls.propTypes = {
  price: PropTypes.number
}

方案3：增加条件渲染 #

确认price是合法数字之后再渲染对应内容：

<p>
  Trenutna cena: <strong>{typeof props.price === 'number' && !isNaN(props.price) ? props.price.toFixed(2) : '0.00'}</strong>
</p>

内容的提问来源于stack exchange，提问作者Miloš Milutinov