setTimeout в реакции setState

Question

this.setState(prevState => ({
    score:            prevState.score + 10,
    rightAnswers:     prevState.rightAnswers + 1,
    currentQuestion:  setTimeout(() => {
      prevState.currentQuestion + 1
    }, 2000)
    }))
  }

При нажатии кнопки я меняю состояние. Моя цель - задержать изменение состояния currentQuestion, во время которого я хочу показывать определенные сообщения о состоянии, но хочу сразу же обновлять счет без задержек.

Как правильно это сделать?

PS: этот вариант не работает, он предназначен для общего представления того, что я хочу сделать.

Спасибо.

Answer 1

Вы можете сделать это несколькими способами:

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

Answer 2

Сначала используйте 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>