Re：どのようにthis.stateを後続のsetState（）呼び出しで使用するのですか？ this.stateへの更新を強制するには？

Question

私はいくつかのゲームのスコアを追跡することができる小さなアプリケーションに取り組んでいます。

ゲームは2人のプレーヤーの間で行われます。プレイヤーはポイントを獲得できますが、ペナルティを被ることもあります。プレーヤーの得点からペナルティを差し引く代わりに、相手の得点に加算されます。相手も次のターンを取るべきです。

Iセットアップ上記の説明を実装デモ：https://codepen.io/anon/pen/ybLQvR

あなたはそれがかなりの仕事をしませんデモで見ることができるように：プレイヤーは、彼は代わりに相手の、ペナルティキックが与えられますペナルティを被るとき。

setStatesetTurnがすぐに処理されないためです。 setScoreは、まだターンが更新されていない「古い」状態を使用しています。

これは、以前に設定された状態を取るオブジェクト（コメント付きコードを参照）ではなく、setStateにコールバックを渡すことで処理できることがわかりました。私がそれをするならば、期待どおりに動作します。

しかし、setStateコールの外側のaddScoreには、状態の更新値（この場合はthis.state.turn）が必要です。どうすればこれを達成できますか？私はthis.forceUpdate()を無駄にしようとしました。

setStateコールバックにaddScoreの関数本体全体をラップする必要がありますか？それでは、addScoreメソッドからthis.state.turnに基づく計算をどのように返す必要がありますか？

サイド質問：なぜthis.forceUpdate()が機能しないのですか？状態キューを処理せずにコンポーネントを再描画するだけですか？

私を助けてくれてありがとう！

Answer 1

あなたは今何を言っているのか分かります。あなたがしようとしている私の目立たないことは、setStateメソッドが別のsetStateメソッドの前に実行されていることを確認することです。

は今、ドキュメントは、これが問題に言っている：

2番目のパラメータは がSETSTATEが完了した後に実行し、コンポーネントが再レンダリングされるだろう、オプションのコールバック関数です。 一般に、そのようなロジックの代わりにcomponentDidUpdate（）を使用することをお勧めします。

componentDidUpdate()を推奨します。それではどうやって問題になるのですか？

componentDidUpdate(prevProps, prevState) 

これはメソッドシグネチャです。したがって、前の状態が引き継がれ、現在はthis.state経由で現在の状態にアクセスできることがわかります。

回答はcodepenを参照してください。

基本的にはaddScoreとchangeTurnをsetStateのスニペットにしました。これは、1つのアトミック操作を行うために、それらを組み合わせたり、状態を変更したりできることを意味します。また、シナリオごとに複雑なデフォルトパラメータを追加することなく再利用することができます。

第2に、状態を設定するためにこれらのメソッドを適用した関数を追加しました。これらはボタンが使うものです！

最後に、componentDidUpdateの機能では、実行されている現在のアクションに基づいてアクションを適用する機会があります。デフォルトのアクションにsetStateを追加しないと、更新の無限ループが発生します......