Как правильно обновлять счетчик в React? - PullRequest
Новая
       17

Как правильно обновлять счетчик в React?

0 голосов
/ 11 февраля 2019

Как мне объявить счетчик в состоянии, объявить другие переменные, которые используют этот счетчик для вывода, а затем обновить счетчик и все другие переменные на onClick?Это до setState быть async?Я только начал с React. 

const arr = Object.keys(questionAnswers).map(key => { return questionAnswers[key] });

this.current = 0;

this.state = {
    current: this.current,
    questions: arr[this.current].question,
    options: Object.keys(arr[this.current].options).map(key => { return arr[this.current].options[key]}),
    }
}

А затем обновил с помощью функции onClick: 

nextQuestion = () => {
    this.current++
    this.setState({
    current: arr[this.current].question,
    options: arr[this.current].options
    });
}

Ответы [ 3 ]

0 голосов
/ 11 февраля 2019

Вы можете ссылаться на состояние как this.state 

this.state = {
  current: 0
  ...
}

nextQuestion = () => {
  this.setState({
    current: this.state.current + 1
    ...
  })
}

Всякий раз, когда состояние изменяется, реакция будет вызывать повторную визуализацию вашего компонента, поэтому всегда можете ссылаться на this.state

0 голосов
/ 11 февраля 2019

Функция setState выполняется в пакетном режиме и является асинхронной.В вашем случае, если вы хотите обновить переменную на основе предыдущего состояния , вам следует использовать функцию в функции setState .Это даст синхронные обновления.

Примерно так. 

this.setState((prevState, props) => ({
  current: prevState.current + 1
}));
0 голосов
/ 11 февраля 2019

Обновить счетчик вы можете следующим образом: 

setState((prevState) => {current: prevState.current + 1});
...