Question

对于我的数字游戏项目，我希望计算出的新值能够在单击按钮时显示出来。但是现在我需要单击同一按钮两次才能显示新值。我如何单击即可进行更新？

我希望更新的那个

<p>Current guess: <strong>{Math.round(this.state.guess)}</strong></p>

我的按钮：

<button onClick={this.Higher.bind(this)}> Higher </button>
<button onClick={this.Lower.bind(this)}>Lower</button>

他们的方法：

Higher() {
  this.setState({
    min: this.state.guess,
    max: this.state.max,
    guess: ((this.state.min + this.state.max) / 2)
  });
};

Lower() {
  this.setState({
    max: this.state.guess,
    min: this.state.min,
    guess: ((this.state.min + this.state.max) / 2),  
  }); 
};

我怀疑第一次单击会启动计算，而第二次单击会调用结果。

我是ReactJS的新手，想通过在ReactJS中重建一些旧的C＃项目来学习。

Answer 1

我认为问题实际上出在您的“猜测”计算逻辑上-您其余的代码看起来还不错。

Higher() {
  const newMin = this.state.guess;
  const newGuess = (newMin + this.state.max) / 2;
  this.setState({
    min: newMin,
    guess: newGuess    
  });
}

Lower() {
  const newMax = this.state.guess;
  const newGuess = (this.state.min + newMax) / 2;

  this.setState({
    max: newMax,
    guess: newGuess      
  });
}

仅供参考，最好在构造函数中而不是在渲染器中进行.bind()的操作-这意味着它只会运行一次。 See this blog post for more information。

还值得注意的是，如果值与当前状态相同，则不需要更新状态值。 setState仍会进行深度状态合并，因此您只需要传递更改后的数据即可。

即

this.setState({
   min: newMin,
   max: this.state.max // No need for this!
});

工作示例：

https://jsfiddle.net/daveSalomon/0ya729r4/7/

Answer 2

setState是异步的，因此无法正常工作。您可以做的是再次调用setState传递回调。

id

Answer 3

您需要正确了解setState。

setState（）并不总是立即更新组件。它可能会批量更新或将更新推迟到以后。这使得在调用setState（）之后立即读取this.state是一个潜在的陷阱。

More reference about setState

this.setState((state, props) => ({
            min:state.guess,
            max:state.max,
            guess: ((state.min + state.max) / 2)
}));

如何在不双击按钮的情况下更新值？反应

3 个答案: