使用toFixed()为何导致React的useState钩子出现setQuantity非函数错误？

这根本不是useState的问题，而是JavaScript自动分号插入（ASI）的语法解析错误，跟toFixed()本身无关。

看你注释掉的那行代码，当你启用(temp + price).toFixed(2);时，它前面的setQuantity(quantity+1)没有加尾部分号，JS会把这两行代码解析成一个连续的表达式：

setQuantity(quantity+1)(temp + price).toFixed(2);

换句话说，JS误以为你要把setQuantity(quantity+1)的返回值当成一个函数，然后传入temp+price作为参数调用，再调用toFixed(2)。

但React的state setter（也就是setQuantity）执行后返回的是undefined，你尝试调用undefined(temp+price)，自然会抛出"不是函数"的错误，而报错信息刚好指向setQuantity，才让你误以为是这个钩子出了问题。

验证与解决 #

1. 给setQuantity的调用语句加上尾部分号，就能解决语法解析问题：

   case "plus":
     setQuantity(quantity+1); // 加上分号
     temp = (temp + price).toFixed(2); // 把结果赋值给temp，不然这行代码毫无意义
     setTotal(temp);
     break;
   

2. 你在UI里直接用{total.toFixed(2)}没问题，是因为那是在JSX表达式里，属于独立的语句上下文，不会触发这种错误的语法合并。

额外提醒 #

toFixed()返回的是字符串类型，如果你直接把它传给setTotal，后续计算时可能会出现字符串拼接的问题（比如"10.00" + 5会得到"10.005"），建议先转成数字：

temp = Number((temp + price).toFixed(2));

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