ゲーム プロジェクトに、index.tsx という React コンポーネントがあり、ユーザーの残高が変更されるたびにコンポーネントが更新されることを前提として、状態を更新する変数があります。

ゲーム開始時にユーザーの残高を基準値として保存し、その基準値から各トランザクションの加減算のみを行う「ネットポジション」機能を作成しています。

ユーザーの最初の残高 (footerBalance 変数) が $5000 であると仮定すると、ネット ポジション ラベルには、$5000 をベースとして、その値が 0 (netPositionBalance 変数) として表示されます。ユーザーは次のゲームで $100 を獲得し、残高は $5100 (footerBalance 変数内) になり、ネット ポジションは $100 (netPositionBalance 変数内) になります。

ここで何が起こっているかというと、残高が更新されるとネットポジションの金額も更新され、同じコンポーネントファイル内にあるためネットポジションが0になります。

この問題が最初の時点で修正され、コンポーネントがどのように更新されても、この特定のコードが再レンダリングされないことを願っています。

バランスを取得するためのコード ブロックは次のとおりです。

const footerBalance = useAppSelector(state => state.app.footerUnformattedBalance); //これにより残高が変更されます。つまり、$100 を獲得した後に $5000 が与えられます。 、$5100

次のように、開始点からのネット位置 (変数 netPositionBalance 内) を表示できるように、footerBalanceAtStart という変数が必要です。

let netPositionBalance = Number(footerBalanceAtStart) - Number(footerBalance); //ゲーム中、$100 に更新される必要があります

「footerBalanceAtStart」を定義して、バランスを 1 回だけ取得し、その後はプロジェクトの全期間を通じて一定に保つようにしたいと考えています。