React setState не обновляет состояние

Итак, у меня есть это:

let total = newDealersDeckTotal.reduce(function(a, b) {
  return a + b;
},
0);

console.log(total, 'tittal'); //outputs correct total
setTimeout(() => {
  this.setState({dealersOverallTotal: total});
}, 10);

console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); //outputs incorrect total

newDealersDeckTotal - это всего лишь массив чисел [1, 5, 9], например. однако this.state.dealersOverallTotal не дает правильное значение, но total делает? Я даже поставил задержку таймаута, чтобы понять, разрешило ли это проблему. любой очевидный или я должен опубликовать больше кода?

Ответы

Ответ 1

setState() обычно является асинхронным, что означает, что в то время, когда вы console.log состояние, оно еще не обновлено. Попробуйте поместить журнал в обратный вызов метода setState(). Он выполняется после завершения изменения состояния:

this.setState({ dealersOverallTotal: total }, () => {
  console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1');
});

Ответ 2

setState() требуется время для изменения значения, а ваш javascript - asynchronous, и, следовательно, ваш console.log() будет выполнен до того, как setState изменяет значения и, следовательно, вы увидите результат.

Чтобы решить эту проблему, зарегистрируйте значение в callback function of setState как

setTimeout(() => {this.setState({dealersOverallTotal: total}, function(){
                console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); 
         });
      }, 10)

Ответ 3

setState является асинхронным. Вы можете использовать метод обратного вызова для получения обновленного состояния.

changeHandler(event) {
    this.setState({ yourName: event.target.value }, () => 
    console.log(this.state.yourName));
 }