React useState实现商品数量增减时动态初始值出现NaN问题

可能原因 #

你遇到的问题大概率是menimum的类型不符合预期——虽然console.log显示看起来正常，但它实际是字符串类型的数字（比如接口返回的"1"），或是在组件初始化时service还未加载完成导致menimum为undefined，最终引发useState初始化及后续加减操作出现NaN。

解决方案 #

1. 显式转换为数字并处理异常 #

在初始化useState时，将menimum强制转换为数字，同时添加兜底默认值，避免转换失败：

const { price, available, name, menimum } = service;
// 转换为数字，若转换失败或值无效则用1作为默认值
const initialQty = isNaN(Number(menimum)) ? 1 : Number(menimum);
const [updatedQuantity, setUpdatedQuantity] = useState(initialQty);

const handleDecrease = () => {
    // 防止数量低于设定的最小值
    setUpdatedQuantity(pre => Math.max(initialQty, pre - 1))
}
const handleIncrease = () => {
     setUpdatedQuantity(pre => pre + 1)
}

2. 先验证menimum的真实状态 #

如果转换后仍有问题，先确认menimum的类型和实际值，排查数据来源问题：

const { menimum } = service;
console.log(typeof menimum, menimum); // 打印类型和值，比如输出"string" "2"或"undefined"

• 若输出为字符串，用上述转换方法即可解决；
• 若输出为undefined，需检查service对象是否已正确加载（比如接口请求未完成时，service为空对象），可添加加载状态判断后再初始化useState。

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