计数器的基于条件的 setState

Question

向some tutorial docs学习，我正在尝试根据条件更新计数器（递增/重置），下面是教程中的实际代码

var CowClicker = React.createClass({
  getInitialState: function() {
    return {
      clicks: 10,
      val:1                   // this has been added by me
    };
  },

  onCowClick: function(evt) {
    this.setState({
      clicks: this.state.clicks + 1,
      val: this.state.val * this.state.clicks,  // code part in question
      }
    });
  },

  render: function() {
    return (
      <div>
        <div>Clicks: {this.state.clicks}</div>
        <div>Val: {this.state.val}</div>
        <img
          src="http://s3.bypaulshen.com/buildwithreact/cow.png"
          onClick={this.onCowClick}
          className="cow"
        />
        <p>Click the cow</p>
      </div>
    );
  }
});

ReactDOM.render(
  <CowClicker />,
  document.getElementById('container')
);

现在，我正在尝试按如下方式进行基于条件的重置，但它不起作用：

  onCowClick: function(evt) {
    this.setState({
      clicks: this.state.clicks + 1,
      alert(this.state.val),
      if(this.state.val > 1000000){ //this is not working
        val: 1,
      }else{
        val: this.state.val * this.state.clicks,
      }
    });
  },

这个问题可能太明显或太愚蠢了，这就是为什么我在网络上没有得到关于我错在哪里的指示？
setState可以不对逻辑运算符进行操作吗？是纯粹设置东西还是使用函数调用（例如搜索链接 1 | ）？

Answer 1

您提供

{
  clicks: this.state.clicks + 1,
  alert(this.state.val),
  if(this.state.val > 1000000){ //this is not working
    val: 1,
  }else{
    val: this.state.val * this.state.clicks,
  }
}

作为您的 setState() 调用的参数，它必须是对象或函数。

您的 if 位于对象内的某处，据我所知这无法工作:-)

提供对象：

onCowClick: function(evt) {
  const val = this.state.val > 1000000 ? 1 : this.state.val * this.state.clicks;
  alert(this.state.val);
  this.setState({
    clicks: this.state.clicks + 1,
    val: val,
  });
},

提供功能：

onCowClick: function(evt) {
  this.setState((prevState, props) => {
    const val = prevState.val > 1000000 ? 1 : prevState.val * prevState.clicks;
    return {
      clicks: prevState.clicks + 1,
      val: val,
    };
  });
},

其中后者会更正确，因为您将指的是当前状态，而第一个可能指的是过时的状态。

Answer 2

setState 接受新对象（更新程序）或回调。

this.setState({
  clicks: this.state.clicks + 1,
  val: this.state.val > 1000000 ? 1 : this.state.val * this.state.clicks,
})

作为回调示例：

this.setState(prevState => ({
  ...prevState,
  clicks: prevState.clicks + 1,
  val: prevState.val > 1000000 ? 1 : prevState.val * prevState.clicks,
}))

是否需要在状态更新后立即执行任何其他操作：

this.setState({
  clicks: this.state.clicks + 1,
  val: this.state.val > 1000000 ? 1 : this.state.val * this.state.clicks,
}, () => {
  // your next action
})

更多信息请参考ReactJS docs。

计数器的基于条件的 setState

condition based setState for counters

setstate

reactjs