Question

我正在用ReactJS创建一个计算器，但遇到了状态无法正确更新的问题。

我正在尝试使计算器的“公式”部分起作用，我遇到了一个与生命周期事件有关的问题，但无法弄清楚到底发生了什么。 / p>

基本上，我创建了一个名为“ handleFormula”的函数，该程序在程序检测到已输入运算符（+/- x）且后跟数字或十进制时调用。然后，该函数应检查公式字段中是否存在单个0或“按下按钮”字样，将其清除，然后将显示的内容与公式对应。

但是，即使在handleFormula中的if语句被调用时，状态也不会正确更新，并且显示最终会被连接到单词“ Push a button”或“ 0”。

这里有一个视频来说明我的意思：https://youtu.be/7wgtXKbMq4s

为什么在连接之前，公式框未清除屏幕？

我已注释掉代码的各个部分，以试图找出问题所在。当我不尝试连接新值时，它将清除屏幕，因此if语句是正确的，但是，一旦我将调用以将显示值连接到公式屏幕时，就会出现此错误。

我已经尝试发布forceupdate来消除计时问题，但这似乎没有什么改变。

const operators = /[+\-x/]/g;
const letters = /[a-z]/i;

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      display: "0",
      formula: "Push a button"
    };

    this.handleInput = this.handleInput.bind(this);
    this.handleClear = this.handleClear.bind(this);
    this.handleFormula = this.handleFormula.bind(this);
  }

//Moves the numbers and operators from the display to the formula box
  handleFormula(y) {
    console.log("handleFormula() called");
    if (letters.test(this.state.formula)) {
      console.log("Non-numbers cleared");
      this.setState({ formula: "" });
      this.forceUpdate();
    } else if (this.state.formula === "0") {
      console.log("Single 0 cleared");
      this.setState({ formula: "" });
      this.forceUpdate();
    }
    console.log("Formula updated");
    this.setState({ formula: this.state.formula + y });
  }  

//Logic for display
  handleInput(x) {
    console.log(letters.test(this.state.formula));
    //console.log(operators.test(x));
    //console.log(operators.test(this.state.display));
    //Checks if part of the formula is complete and the display needs to be reset
    if (operators.test(this.state.display) && operators.test(/[0-9]/)) {
      console.log("Calling handleFormula()");
      this.handleFormula(this.state.display);
      this.setState({ display: "0" });
    }
    //Doesn't allow for multiple starting 0s
    else if (this.state.display === "0" && x === "0") {
      this.setState({ display: "0" });
      return;
    }
    //Allows for operators to follow a zero
    else if (x.match(operators)) {
      this.setState({ display: this.state.display + x });
    }
    //Removes the default 0 if preceding conditions aren't met
    else if (x !== 0 && x !== "." && this.state.display === "0") {
      this.setState({ display: x });
    }
    //Doesn't allow for consecutive decimals
    else if (this.state.display.match(/\.{1,}/g) && x == ".") {
      return;
    }
    //Otherwise concat x to the string
    else {
      this.setState({ display: this.state.display + x });
      return;
    }
  }

  //Clears the display and formula fields
  handleClear() {
    this.setState({ display: "0", formula: "0" });
    return;
  }

当程序检测到运算符（+-/ x）后跟数字时，显示框中的数字应移至公式框。除非公式框上显示“按下按钮”或具有单独的“ 0”，否则它们应与现有公式结合。

该公式同时连接到“按下按钮”（“ Push a button26x”）和“ 0”（“ 026x”）。

状态未正确更新：生命周期问题？

0 个答案: