Реагировать SetState не обновляет состояние

Question

Так что у меня это:

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 делает? Я даже поставил задержку таймаута, чтобы понять, разрешило ли это проблему. любой очевидный или я должен опубликовать больше кода?

Answer 1

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

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

Answer 2

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

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

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