只在React元件的狀態更新時執行一次的程式碼
P粉340980243
2023-09-01 21:08:59
<p>我在我的遊戲專案中有一個名為index.tsx的react組件,它具有更新狀態的變量,假設每當用戶餘額發生變化時,組件都會刷新。 </p><p>
我正在創建一個「淨頭寸」功能,即在開始遊戲時將用戶餘額保存為參考值,然後只應從該參考值中進行每筆交易的加減。 </p><p>
假設使用者在開始時的餘額為$5000(在footerBalance變數中),那麼淨部位標籤將顯示該值為0(在netPositionBalance變數中),以$5000作為基準。現在用戶在下一次遊戲中贏得$100,他的餘額將變為$5100(在footerBalance變數中),淨部位將變為$100(在netPositionBalance變數中)。 </p><p>
現在的情況是,一旦餘額更新,我的淨頭寸金額也會更新,因為它在同一個組件文件中,淨頭寸變為0。 </p><p>我希望在開始時修復這個問題,而這段特定的程式碼不應該重新渲染,無論元件如何刷新。 </p><p></p>
<p>取得餘額的程式碼區塊如下:</p>
<pre class="brush:php;toolbar:false;">const footerBalance = useAppSelector(state => state.app.footerUnformattedBalance); //這會改變餘額,即它將給出$5000,並在贏得$100後,它將變成$5100</pre>
<p>我需要一個名為footerBalanceAtStart的變量,以便我可以從起始點顯示淨頭寸(在變量netPositionBalance中),類似於以下內容:</p>
<pre class="brush:php;toolbar:false;">let netPositionBalance = Number(footerBalanceAtStart) - Number(footerBalance); //在遊戲過程中,它應該更新為$100</pre>
<p>我希望「footerBalanceAtStart」被定義為只取得一次餘額,然後在整個專案的持續時間內保持不變。 </p>
所以我找到了答案。顯然我也可以在這裡使用useEffect,像這樣:
現在它只會儲存一次值,並且不會在沒有狀態更新函數setAny()的情況下自動更改