从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)?
答案 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。