ゲームのスコアを追跡できる小さなアプリケーションに取り組んでいます。
ゲームは 2 人のプレイヤー間で行われます。プレーヤーはポイントを獲得できますが、ペナルティを受けることもあります。プレーヤーのスコアからペナルティを差し引く代わりに、対戦相手のスコアに追加されます。相手も次のターンを取得する必要があります。
上記の説明を実装するデモをセットアップしました: https://codepen.io/anon/pen/ybLQvR
デモでわかるように、それは完全には機能しません。プレーヤーがペナルティを受けると、相手の代わりにペナルティが与えられます。
これは、すぐに処理さsetStateれsetTurnないためです。setScoreターンが更新されていない「古い」状態を引き続き使用します。
setStateこれは、以前に設定された状態を取得するオブジェクトの代わりにコールバックを渡すことで処理できることを認識しています (コメント コードを参照)。私がそれを行うと、物事は期待どおりに機能します。
ただし、呼び出しthis.state.turnのaddScore外部でも状態 (この場合)の更新された値が必要setStateです。どうすればこれを達成できますか? 私はthis.forceUpdate()無駄にしようとしました。
コールバックaddScoreで関数本体全体をラップする必要がありsetStateますか? 必要に応じてthis.state.turn、addScoreメソッドに基づいた計算をどのように返しますか?
副次的な質問: なぜ機能しないのthis.forceUpdate()ですか? 状態キューを処理せずにコンポーネントの再レンダリングをトリガーするだけですか?
助けてくれてありがとう！
私はあなたが今言っていることを参照してください。あなたが何をしようとしているのか理解できないのですが、setState メソッドが別の setState メソッドの前に実行されていることを確認してください。
ドキュメントには、この問題について次のように書かれています。
2 番目のパラメーターは、setState が完了してコンポーネントが再レンダリングされると実行されるオプションのコールバック関数です。通常、そのようなロジックには、代わりに componentDidUpdate() を使用することをお勧めします。
したがって、彼らの推奨事項により、使用する必要がありますcomponentDidUpdate()。では、今の質問はどうですか。
componentDidUpdate(prevProps, prevState)
それがメソッド シグネチャです。したがって、以前の状態が渡され、現在の状態に を介してアクセスできるようになったことをここで確認できますthis.state。
答えはcodepenを参照してください。
基本的に - 私はaddScoreとchangeTurnをsetState. これは、状態の変更とそれらを組み合わせて、1 つのアトミック操作を行うことができることを意味します。また、さまざまなシナリオで複雑なデフォルト パラメータを追加せずに再利用できます。
次に、状態を設定するためにこれらのメソッドを適用する関数を追加しました。これらはボタンが使用するものです！
最後に、componentDidUpdate関数では、実行されている現在のアクションに基づいてアクションを適用する機会があります。デフォルト アクションに setState を追加しないでください。追加しないと、更新の無限ループが発生します......
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加