導入する

function App() {
  const [n, setN] = useState(0)
  const onClick = ()=>{
    setN(n+1)
    setN(n+1) //      ，n  +1，   +2
    // setN(i=>i+1)
    // setN(i=>i+1)
  }
  return (
    

      
n: {n}
      +2
    
  );
}

ReactDOM.render(, document.getElementById("root"));

reactコードは上の図のようです.

直感的に騙されました.私たちはバートンをクリックして、2回のsetNを実行するはずです.nは2になります.

実際:nは1

になります.
なぜnは1で、2ではないですか?
まず、useStateの原理を明らかにします.私のブログを参考にして、useStateの簡易実現を説明しました.https://segmentfault.com/a/11....

知っています.

useStateは実行するたびに新しいstate(単純なタイプの等価コピー)

を返します.

set Stateは、UI更新をトリガする

.

UI更新は非同期タスクであるため、set Stateも非同期プロセス

である.
setN(n+1)を2回行ったとき、実際には2つのクローズドが形成され、このときのnの状態(n＝0)への参照が保存されています.setNの後:

は、まずそれぞれ2つの新しいnを生成し、値はn＋1(すなわち1)に等しいが、互いに無関係である.

はそれぞれレンデを行いましたが、最新のレンデだけが有効です.今回レンデは最後のsetN関数で生成されたnを引用しました.

解決方法

//     ，    ，    
setState( x => x+1 )

によって受信された関数x=>x+1は、nへの参照を保持しない代わりに、1つのアクションを追加する

を表している.

は、関数コードを使用してsetState

を行うことを推奨する.