计数器

时间:2017-11-21 10:15:35

标签: reactjs setstate

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)?

2 个答案:

答案 0 :(得分:3)

您提供

{
  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,
    };
  });
},

后者更正确,因为你将引用当前状态,第一个可能指的是过时的状态。

答案 1 :(得分: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