[解決済み] ReactJSのprevStateとは何ですか？重複] [重複] [重複

質問

私はそれが尋ねる愚かな質問かもしれないと思うが、私はreactJSの初心者であることを信じています。どなたか、なぜ prevState ReactjSで。私は理解するために懸命に試みたが、失敗しました。

以下は私のコードです。理解するために私を助けてください

 state = {
    placeName : '',
    places : []
}



placeSubmitHanlder = () => {
    if(this.state.placeName.trim()===''){
      return;
    }
    this.setState(prevState => {
      return {
        places : prevState.places.concat(prevState.placeName)
      };
    });
  };

解決方法は？

prevState は、setStateコールバック関数に渡された引数に付けた名前です。この関数が保持するのは、コールバック関数に渡される前の状態の値です。 setState はReactによってトリガーされました。 setState はバッチ処理を行うので、前の状態の値に基づいて新しい状態を更新したい場合、前の状態が何であったかを知ることが重要な場合があります。

そのため、複数の setState 呼び出しが同じ状態を更新している場合、setState 呼び出しをバッチングすると、誤った状態が設定される可能性があります。例を考えてみましょう。

state = {
   count: 0
}
updateCount = () => {
    this.setState({ count: this.state.count + 1});
    this.setState({ count: this.state.count + 1});
    this.setState({ count: this.state.count + 1});
    this.setState({ count: this.state.count + 1});
}

上記のコードでは、countの値が4であることを期待するかもしれませんが、実際には1になってしまいます。なぜなら、setStateの最後の呼び出しが、バッチ処理中に以前の値を上書きしてしまうからです。これを解決する方法として、functional setStateを使用する方法があります。

updateCount = () => {
    this.setState(prevstate => ({ count: prevstate.count + 1}));
    this.setState(prevstate => ({ count: prevstate.count + 1}));
    this.setState(prevstate => ({ count: prevstate.count + 1}));
    this.setState(prevstate => ({ count: prevstate.count + 1}));
}