为什么我必须单击两次才能触发事件？

Question

抱歉这个问题太简单了，我对 React 还很陌生。我构建了一个带有两个输入字段和按钮来处理不同计算的计算器。现在，我正在将其改造成一个功能更齐全、带有整个键盘的计算器。在下面的代码中，我非常确定我编写的“onClick”函数的方式有问题，但我不确定它应该如何编写。（示例中的大部分代码与初始项目有关，与这个问题无关，我只是想包含整个组件以进行良好的衡量。）

当我单击“1”按钮时，它第一次控制台记录 1，但页面顶部的 1 直到第二次单击才显示。我在这里发生了什么，不允许在我第二次单击“1”按钮之前显示在顶部？

首次点击： 首次点击后的应用程序 1

第二次点击： 第二次点击后的应用程序 1

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.setNum1 = this.setNum1.bind(this);
    this.setNum2 = this.setNum2.bind(this);
    this.add = this.add.bind(this);
    this.subtract = this.subtract.bind(this);
    this.multiply = this.multiply.bind(this);
    this.divide = this.divide.bind(this);
    this.clear = this.clear.bind(this);
    this.buttonPressed = this.buttonPressed.bind(this);

    this.state = {
      pressed: "",
      result: "",
      num1: "",
      num2: "",
    };
  }

  buttonPressed(e) {
    e.preventDefault();
    const pressed = e.target.name;
    const result = this.state.pressed;
    this.setState({ pressed });
    this.setState({ result });
    console.log(e.target.name);
  }

  setNum1(e) {
    const num1 = e.target.value ? parseInt(e.target.value) : "";
    this.setState({ num1 });
  }

  setNum2(e) {
    const num2 = e.target.value ? parseInt(e.target.value) : "";
    this.setState({ num2 });
  }

  add(e) {
    e.preventDefault();
    const result = this.state.num1 + this.state.num2;
    this.setState({ result });
  }

  subtract(e) {
    e.preventDefault();
    const result = this.state.num1 - this.state.num2;
    this.setState({ result });
  }

  multiply(e) {
    e.preventDefault();
    const result = this.state.num1 * this.state.num2;
    this.setState({ result });
  }

  divide(e) {
    e.preventDefault();
    const result = this.state.num1 / this.state.num2;
    this.setState({ result });
  }

  clear(e) {
    e.preventDefault();
    this.setState({ num1: "", num2: "", result: 0 });
  }

  render() {
    const { num1, num2, result } = this.state;
    return (
      <div>
        <h1>{this.state.result}</h1>
        <input onChange={this.setNum1} value={num1}></input>
        <input onChange={this.setNum2} value={num2}></input>
        <br />
        <button name="1" onClick={this.buttonPressed}>
          1
        </button>
        <button onClick={this.add}>+</button>
        <button onClick={this.subtract}>-</button>
        <button onClick={this.multiply}>x</button>
        <button onClick={this.divide}>/</button>
        <button onClick={this.clear}>clear</button>
      </div>
    );
  }
}

export default Calculator;

如果有人可以帮助我了解我需要做什么来解决这种情况，我将非常感激！

Answer 1

推理：

• 阻止导致问题的部分

  buttonPressed(e) {
    e.preventDefault();
    const pressed = e.target.name;
    const result = this.state.pressed;
    this.setState({ pressed });
    this.setState({ result });
    console.log(e.target.name);
  }
  

• 原因：setState 需要一段时间来更新状态对象值（即，setState 不会立即更新状态对象，因为它本质上是异步的。

• 参考：为什么 React setState/useState 不会立即更新 - 博客

下面列出了此问题的可能解决方案案例

情况 A：根据“按下”状态对象设置“结果”状态对象

• 注意：使用回调函数设置目标对象状态更改后，设置其他对象的状态

• 目标：仅在设置“按下”状态对象后设置“结果”状态对象

• 实现：设置“按下”状态后，我们执行回调函数来设置“结果”状态对象

• 句法：

  this.setState(setTargetStateObject, function() { // 执行 setTargetStateObject 完成后必须执行的操作 });

• 解决方案：

   buttonPressed(e) {
     e.preventDefault();
     const pressed = e.target.name;
     this.setState({ pressed }, function() {
       this.setState({ result: this.state.pressed });
     });
   }
  

情况 B：根据传递的 'e' arg 值设置结果状态对象

• 解决方案：

  buttonPressed(e) {
    e.preventDefault();
    const pressed = e.target.name;
    // const result = this.state.pressed;
  
    // directly assign the 'e' arg value to the result const variable
    const result = pressed;
  
    // 'result' state object is not dependent on 'pressed' state object
    this.setState({ pressed });
    this.setState({ result });
    console.log(e.target.name);
  }
  

注意：我建议你使用函数式组件，因为你可以用更少的行数获得干净的代码，使用 React 团队新引入的钩子，更容易编写测试，最重要的是性能。

为您创建了这个沙箱 计算器 pgm - 类与功能性反应组件- 您可以查看如何在类与功能性组件中实现您的相同程序。

参考：

• 功能组件与类组件
• 为什么 setState 不立即更新 - stackoverflow
• 为什么 React setState/useState 不会立即更新 - 博客