web-dev-qa-db-ja.com

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は提供しますか？私はタイムアウトの遅延を入れて、これで問題が解決したかどうかを確認しました。明らかな、またはもっとコードを投稿する必要がありますか？

javascriptreactjsstatesetstate
47
The worm

setState()は通常非同期です。つまり、console.log状態では、まだ更新されていません。 setState()メソッドのコールバックにログを入れてみてください。状態の変更が完了した後に実行されます。

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

setStateは非同期です。コールバックメソッドを使用して、更新された状態を取得できます。

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

setState()は値の変更に時間がかかり、javascriptはasynchronousであるため、setStateが値を変更する前にconsole.log()が実行され、結果が表示されます。

解決するには、値をcallback function of setStateのように記録します

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

Async/awaitを使用する

async changeHandler(event) {
    await this.setState({ yourName: event.target.value });
    console.log(this.state.yourName);
}
3
Dev01