React JS setState 不更新值

Question

对 React 很陌生。

尽管这里有很多关于 ReactJS 的问题，我仍然无法解决这个问题。

我想重置状态或将其归零，但由于某种原因，状态没有重置（但是我可以向其中添加更多字符，见下文）

添加更多字符的代码（有效）...：

var temp=this.state.numDisplay.toString() + id.toString();
this.setState( {numDisplay :  temp},  () => this.forceUpdate());

未导致值更改的代码：

this.setState({numDisplay : 0},  () => this.forceUpdate());

我尝试了多种更改 numDisplay 的方法，例如使用值为零的变量，但这些方法都不起作用。

如有任何建议，我们将不胜感激。谢谢

编辑：

class Calc extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      numDisplay: 0,
      num1: 0,
      num2: 0,
      oper: ""
    };
    this.appendNum = this.appendNum.bind(this);
    this.appendoper = this.appendoper.bind(this);
  }

  appendNum(event) {
    if (
      event.target.id.toString() === "." &&
      this.state.numDisplay.toString().includes(".")
    ) {
    } else {
      var temp = this.state.numDisplay.toString() + event.target.id.toString();

      {
        while (temp.charAt(0) === "0") {
          temp = temp.substr(1);
        }
      }

      this.setState(
        {
          numDisplay: temp
        },
        () => this.forceUpdate()
      );
    }
  }

  appendoper(event) {
    if (this.state.numDisplay !== 0) {
      if (
        this.state.num1 === 0
          ? this.setState({ num1: this.state.numDisplay }, () =>
              this.forceUpdate()
            )
          : this.setState({ num2: this.state.numDisplay }, () =>
              this.forceUpdate()
            )
      )
        this.setState({ numDisplay: 0 }, () => this.forceUpdate());
    }
  }

  render() {
    let buttons = [];
    let cbuttons = [];

    for (var i = 9; i > -1; i--) {
      buttons.push(
        <button className="mainBtns" id={i} onClick={e => this.appendNum(e)}>
          {i}{" "}
        </button>
      );
    }

    buttons.push(
      <button id="." className="mainBtns" onClick={e => this.appendNum(e)}>
        .{" "}
      </button>
    );
    buttons.push(
      <button className="mainBtns" onClick={e => this.appendNum(e)}>
        ={" "}
      </button>
    );

    cbuttons.push(
      <button
        className="mainBtns , cBtns"
        id={"+"}
        onClick={e => this.appendoper(e)}
      >
        +
      </button>
    );
    cbuttons.push(
      <button
        className="mainBtns , cBtns"
        id={"-"}
        onClick={e => this.appendoper(e)}
      >
        -
      </button>
    );
    cbuttons.push(
      <button
        className="mainBtns , cBtns"
        id={"/"}
        onClick={e => this.appendoper(e)}
      >
        /
      </button>
    );
    cbuttons.push(
      <button
        className="mainBtns , cBtns"
        id={"*"}
        onClick={e => this.appendoper(e)}
      >
        *
      </button>
    );

    return (
      <section>
        <div id="dispArea">{this.state.numDisplay}</div>

        <div id="mainNumBtns">{buttons}</div>
        <div id="calcBtns">{cbuttons}</div>
      </section>
    );
  }
}

ReactDOM.render(<Calc />, document.getElementById("root"));

正在开发计算器，还没有功能:(

Answer 1

好像跟react状态更新没有关系。您应该在 appendoper 方法中检查您的 if 语句。

appendoper(event) {
    if (this.state.numDisplay !== 0) {
      if (
        this.state.num1 === 0
          ? this.setState({ num1: this.state.numDisplay }, () =>
              this.forceUpdate()
            )
          : this.setState({ num2: this.state.numDisplay }, () =>
              this.forceUpdate()
            )
      )
        this.setState({ numDisplay: 0 }, () => this.forceUpdate());
    }
  }

未达到此语句：

this.setState({ numDisplay: 0 }, () => this.forceUpdate());

将以下 if 条件修正为 return true 或 false：

if (
        this.state.num1 === 0
          ? this.setState({ num1: this.state.numDisplay }, () =>
              this.forceUpdate()
            )
          : this.setState({ num2: this.state.numDisplay }, () =>
              this.forceUpdate()
            )
      )

如果您更新如下，您的代码将是运行:

appendoper(event) {
    if (this.state.numDisplay !== 0) {
        this.state.num1 === 0
          ? this.setState({ num1: this.state.numDisplay }, () =>
              this.forceUpdate()
            )
          : this.setState({ num2: this.state.numDisplay }, () =>
              this.forceUpdate()
            )
        this.setState({ numDisplay: 0 }, () => this.forceUpdate());
    }
  }

也在这里检查：https://codesandbox.io/s/r1wjp90wlq

React JS setState 不更新值

React JS setState not updating value

setstate

reactjs