React，无法根据当前状态设置状态（状态落后一步）

Question

我完全迷失了 React async setState :(

代码沙箱

这就是我想要实现的目标：当我单击操作符按钮（App.js 第 81-98 行）时，我采用 current(new\updated) state.input，用我的函数“格式化”它fixInput（App.js 第 7-22 行，它接受state.input和 event.target.textContent，返回新字符串），并将结果设置为新state.input值。

//Display.js

const Display = (props) => {

  //on equals  click  show  the  output ,  if  input continues  , show input, change showoutput

  let { input, output, showInput } = props;

  return (

    <div id="display" className="display_font">

      {showInput ? input : output}

    </div>

  );

};

//Keypad.js

const Keypad = (props) => {

  return (

    <div id="keypad">

      <button id="clear" onClick={props.handleCeClick}>

        CE

      </button>

      <button id="seven" onClick={props.handleNumClick}>

        7

      </button>

      <button id="eight" onClick={props.handleNumClick}>

        8

      </button>

      <button id="nine" onClick={props.handleNumClick}>

        9

      </button>

      <button id="add" onClick={props.handleOperClick}>

        +

      </button>

      <button id="four" onClick={props.handleNumClick}>

        4

      </button>

      <button id="five" onClick={props.handleNumClick}>

        5

      </button>

      <button id="six" onClick={props.handleNumClick}>

        6

      </button>

      <button id="subtract" onClick={props.handleOperClick}>

        -

      </button>

      <button id="one" onClick={props.handleNumClick}>

        1

      </button>

      <button id="two" onClick={props.handleNumClick}>

        2

      </button>

      <button id="three" onClick={props.handleNumClick}>

        3

      </button>

      <button id="multiply" onClick={props.handleOperClick}>

        *

      </button>

    </div>

  );

};

React setState 是异步的，并且不会立即更新，因此我只能访问以前的 state.input，我可以从 setState 回调记录到控制台当前状态，并且我需要设置一个新状态，这是我无法从回调中执行的。我无法访问当前状态，这就是为什么我的fixInput功能无法正常工作（按数字和重复运算符，例如4++，预计只允许添加运算符*-和的两种组合/-

我确实尝试过用我能想到的各种方式来改变事情。

我的方法有什么问题吗？我的结构可以做到这一点吗？

Answer 1

对我来说一切似乎都很好，只需根据给定的规范清理输入方程，所有测试用例都将得到满足。对handleEqualClick()功能进行以下更改：&nbsp; handleEqualsClick = () => {&nbsp; &nbsp; const { input } = this.state;&nbsp; &nbsp; //todo ? if the last char is oper, delete it&nbsp; &nbsp; // console.log(input);&nbsp; &nbsp; let eq = [];&nbsp; &nbsp; for (let ch of [...input]) {&nbsp; &nbsp; &nbsp; if (!eq.length) {&nbsp; &nbsp; &nbsp; &nbsp; eq.push(ch);&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; if (ch === "-") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eq.push("-");&nbsp; &nbsp; &nbsp; &nbsp; } else if ("+-*/".includes(ch) && "+-*/".includes(eq[eq.length - 1])) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; while ("+-*/".includes(ch) && "+-*/".includes(eq[eq.length - 1])) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eq.pop();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eq.push(ch);&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; eq.push(ch);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; let sanitizedInput = eq.join("");&nbsp; &nbsp; console.log(sanitizedInput);&nbsp; &nbsp; let result = +eval(sanitizedInput).toFixed(7).toString();&nbsp; &nbsp; console.log("result:", result);&nbsp; &nbsp; if (result.length > 11) {&nbsp; &nbsp; &nbsp; result = result.slice(0, 11);&nbsp; &nbsp; }&nbsp; &nbsp; this.setState((state) => ({&nbsp; &nbsp; &nbsp; showInput: false,&nbsp; &nbsp; &nbsp; output: result,&nbsp; &nbsp; &nbsp; input: result //test14&nbsp; &nbsp; }));&nbsp; };代码沙箱链接

Answer 2

一些说明：我想要 1) 通过测试#13，2) 在显示上看到正确的字符功能上有错误fixInput，我this.state.input在需要更新版本时进行了测试，该版本是this.state.input + value.function fixInput(inputStr, currentOp) {    const lastTwoOp = /([+\-*/]{2})$/;    const lastThreeOp = /([+\-*/]{3})$/;    const allowTwo = /(\*|\/)-/;    const toTest = inputStr + currentOp; //<=     if (lastTwoOp.test(toTest) && !allowTwo.test(toTest)) {        inputStr = inputStr.slice(0, -1) + currentOp;    } else if (lastThreeOp.test(toTest)) {        inputStr = inputStr.slice(0, -2) + currentOp;    } else {        inputStr += currentOp;    }    return inputStr;}