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 | 2）？

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。

计数器

2 个答案: