在React中对状态应用实时数学运算，引起输出/状态/ dom的变化

Question

这是我的错误的起点：

我想要做的只是取这个数字并执行乘法的数学运算 - 在这种情况下乘以0.2 - 然而 - 我的程序包含一个令人发指的错误 - 而不是执行该操作 - 只需将20附加到文本框中的字符串，如下所示：

这是我试图用来应用操作逻辑的代码，对我而言似乎完全合理 - 尽管我承认我不是JavaScript的世界级专家，也不是React。以下代码片段是否存在明显错误？

addLogicToEquation(newLogic) {
  let equation = this.state.equation

  if(newLogic==="10%"){
    let newEquation = equation + (equation * 0.10)
    this.setState({equation: newEquation})
  }
  if (newLogic==="15%"){
    let newEquation = equation + (equation * 0.15)
    this.setState({equation: newEquation})
  }
  if (newLogic==="20%"){
    let newEquation = equation + (equation * 0.20)
    this.setState({equation: newEquation})
  }
  else{
    // we're adding more numbers
    let newEquation = equation + newLogic
    this.setState({equation: newEquation})
  }
}

也许那个片段是合理的，而且这个漏洞在我的程序的其他地方 - 我真的不确定从哪里开始寻找，complete codebase可以在这里找到，它不是真的非常庞大 - 在 - 10个左右的文件。

Answer 1

从this.state.equation拉取值时，它会返回一个字符串。您需要将其转换为数字才能对其执行数学运算。在javascript中连接字符串时使用+运算符，因此它将您的等式视为字符串连接。要轻松解决此问题，请在处理初始分配时将状态中等式的值转换为数字。 let equation = Number(this.state.equation)。这是您的完整代码：

addLogicToEquation(newLogic) {
  let equation = Number(this.state.equation)

  if(newLogic==="10%"){
    let newEquation = equation + (equation * 0.10)
    this.setState({equation: newEquation})
  }
  if (newLogic==="15%"){
    let newEquation = equation + (equation * 0.15)
    this.setState({equation: newEquation})
  }
  if (newLogic==="20%"){
    let newEquation = equation + (equation * 0.20)
    this.setState({equation: newEquation})
  }
  else{
    // we're adding more numbers
    let newEquation = equation + newLogic
    this.setState({equation: newEquation})
  }
}

我还想建议将其重构为以下内容：

addLogicToEquation(newLogic) {
  let equation = Number(this.state.equation);
  let newEquation = equation;

  if (newLogic.includes("%")) {
    const percent = Number(newLogic.replace('%', '')) / 100;
    newEquation += (equation * percent);
  } else {
    newEquation += newLogic;
  }

  this.setState({ equation: newEquation });
}

这将允许您轻松修改任何百分比，而无需进行一系列更改。它将更加可维护。

Answer 2

我假设newLogic此处包含字符串"20"。

在JavaScript中，如果向字符串添加数字，则两个部分都将转换为字符串并连接：

var out = 100 + "20"; // "10020"

要强制添加，请将字符串显式转换为数字，例如使用+前缀：

var out = 100 + +"20"; // 120

Answer 3

您需要在操作之前将字符串转换为浮点数：

const string = "100";
const casted = parseFloat(string);
const output = casted + (casted * 0.15);

当然你可以使用1.15而不是添加

const output = parseFloat("100") * 1.15;