this.setState(prevState => ({
score: prevState.score + 10,
rightAnswers: prevState.rightAnswers + 1,
currentQuestion: setTimeout(() => {
prevState.currentQuestion + 1
}, 2000)
}))
}
在按钮上单击“我更改状态”。我的目标是延迟currentQuestion状态更改,在此期间我想显示某些状态消息,但我想立即更新分数而没有延迟。
这样做的正确方法是什么?
PS:此变体不起作用,它是我想要做的事情的整体表示。
谢谢。
答案 0 :(得分:5)
您可以通过多种方式执行此操作:
1)两次致电setState
。 React会将对setState
的所有并发调用批处理为一个批处理更新,因此,这样的操作非常好:
this.setState( prevState => ({
score: prevState.score + 10,
rightAnswers: prevState.rightAnswers + 1
}));
setTimeout( () => {
this.setState( prevState => ({
currentQuestion: prevState.currentQuestion + 1
}));
}, 2000);
2)您可以在第一次通话结束后使用setState
回调来更新状态 :
this.setState(prevState => ({
score: prevState.score + 10,
rightAnswers: prevState.rightAnswers + 1
}), () => {
setTimeout( () => {
this.setState( prevState => ({
currentQuestion: prevState.currentQuestion + 1
}));
}, 2000);
});
答案 1 :(得分:1)
首先使用setState
更改得分和问题,并使用null
之类的值,以便您知道其更新,然后在此之后设置超时。
class Example extends React.Component {
constructor(props) {
super(props)
this.state = {
score: 1,
question: "A"
}
}
update() {
this.setState(prev => ({
score: prev.score + 1,
question: null
}));
this.change = setTimeout(() => {
this.setState({question: "B"})
}, 2000)
}
render() {
let {score, question} = this.state;
let style = {border: "1px solid black"}
return (
<div style={style} onClick={this.update.bind(this)}>
<div>{score}</div>
<div>{question ? question : "Loading..."}</div>
</div>
)
}
}
ReactDOM.render( < Example / > , document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>