javascript - 如何在reactjs中获取以前的状态值

Question

当我点击 New Number 按钮 时，我得到一个从 0 到 15 的随机数...这工作正常，但现在我想要当我点击 Previous Number 按钮 , 它给了我以前的数字/状态。

例如..

一旦渲染运行，我得到 12。然后我点击 New Number 按钮 给我 4，现在我想要当我点击 Previous Number 时改变状态和给我之前状态下的数字，是4。如何实现这个功能...

我知道 componendDidUpdate 有 prevProp 和 prevState 参数，但不知道如何在点击时调用它。这是我的代码

class App extends React.Component {
   state = {
      randomNum: ''
   }

   componentDidMount() {
      this.getNewRandomNum()
   }

   getNewRandomNum = () => {
      let randomNum = Math.floor(Math.random() * 15)
      this.setState({ randomNum })
      console.log(this.state.randomNum)
   }

   prevNum = () => {

   }
   render() {
      return (
         <div>
            <h1>{this.state.randomNum}</h1>
            <button onClick={this.getNewRandomNum}>New Number</button>
            <button onClick={this.prevNum}>Previous Number</button>
         </div>
      )
   }
}

非常感谢您的帮助，希望我说清楚了。

Answer 1

创建一个额外的状态值，如 previousNum，并在调用 getRandomNum 时用 prevState 更新它。

class App extends React.Component {
  state = {
    randomNum: "",
    previousNum: ""
  };

  componentDidMount() {
    this.getNewRandomNum();
  }

  getNewRandomNum = () => {
    let randomNum = Math.floor(Math.random() * 15);
    this.setState(
      prevState => {
        return {
          randomNum: randomNum,
          previousNum: prevState.randomNum
        };
      },
      () => console.log(this.state)
    );
  };

  getPreviousNum = () => {
    this.setState({
      randomNum: this.state.previousNum,
      previousNum: ""
    }, () => console.log(this.state));
  };

  render() {
    return (
      <div>
        <h1>{this.state.randomNum}</h1>
        <button onClick={this.getNewRandomNum}>New Number</button>
        <button
          onClick={this.getPreviousNum}
          disabled={typeof(this.state.previousNum) === "number" ? false : true}
        >
          Previous Number
        </button>
      </div>
    );
  }
}

这里还有沙箱:https://codesandbox.io/s/7345kyly21