React中数字相加出现异常结果的问题求助

兄弟，你这情况我太熟了！这根本不是React的锅，就是JavaScript里字符串和数字的隐式类型转换在搞恶作剧😆

先帮你拆解下问题本质：你的shareTransferred看起来是数字0.03，但实际上它是字符串类型的"0.03"！不信你在控制台输入typeof shareTransferred看看，肯定返回"string"。

为什么会出现奇怪的结果？原因很简单：

• 当你写1 + shareTransferred时，JS会把数字1自动转成字符串，然后执行拼接，结果就是"1" + "0.03" = "10.03"
• 写shareTransferred + 1时，同样是字符串拼接，变成"0.03" + "1" = "0.031"

给你几个简单靠谱的解决办法：

• 方法一：提前转成数字类型
  在使用shareTransferred之前，用Number()把它转成数字：

  const numShare = Number(shareTransferred);
  console.log(1 + numShare); // 正常输出1.03
  console.log(numShare + 1); // 正常输出1.03
  

• 方法二：用 parseFloat 解析小数
  因为你的值是小数，用parseFloat()更精准：

  const numShare = parseFloat(shareTransferred);
  console.log(1 + numShare);
  

• 方法三：快速转数字的小技巧
  用一元加号运算符，一行搞定：

  console.log(1 + (+shareTransferred));
  

• 从根源避免问题
  如果这个值是从接口响应、表单输入或者props里拿到的，建议在初始赋值的时候就转成数字，比如：

  // 假设从接口获取数据
  const apiData = await fetch('/api/data');
  const shareTransferred = Number(apiData.shareTransferred);
  

赶紧去控制台验证下typeof shareTransferred，确认是字符串的话用上面的方法就能解决啦！

备注：内容来源于stack exchange，提问作者Steven