Code, der nur einmal ausgeführt wird, wenn der Status einer React-Komponente aktualisiert wird

Question

Ich habe in meinem Spielprojekt eine Reaktionskomponente namens index.tsx, die über eine Variable verfügt, die den Status aktualisiert, vorausgesetzt, dass die Komponente jedes Mal aktualisiert wird, wenn sich das Guthaben des Benutzers ändert.

Ich erstelle eine „Nettoposition“-Funktion, bei der beim Starten des Spiels das Guthaben des Benutzers als Referenzwert gespeichert wird und dann nur Additionen und Subtraktionen für jede Transaktion von diesem Referenzwert vorgenommen werden sollen.

Angenommen, der Benutzer hat zu Beginn ein Guthaben von 5.000 $ (in der Variable „footerBalance“), dann zeigt die Bezeichnung „Net Position“ diesen Wert als 0 (in der Variable „netPositionBalance“) an, mit 5.000 $ als Basis. Jetzt gewinnt der Benutzer im nächsten Spiel 100 $, sein Guthaben wird zu 5100 $ (in der Variable „footerBalance“) und die Nettoposition wird zu 100 $ (in der Variable „netPositionBalance“).

Was jetzt passiert, ist, dass, sobald der Kontostand aktualisiert wird, auch mein Nettopositionsbetrag aktualisiert wird, und da er sich in derselben Komponentendatei befindet, wird die Nettoposition zu 0.

Ich hoffe, dass dies zu Beginn behoben ist und dass dieser spezielle Code nicht erneut gerendert wird, unabhängig davon, wie die Komponente aktualisiert wird.

Der Codeblock zum Erhalten des Kontostands lautet wie folgt:

const footerBalance = useAppSelector(state => state.app.footerUnformattedBalance); //Dies ändert den Kontostand, d. h. es werden 5000 $ ausgezahlt, nachdem 100 $ gewonnen wurden , beträgt der Betrag 5.100 $

Ich benötige eine Variable namens footerBalanceAtStart, damit ich die Nettoposition (in der Variablen netPositionBalance) vom Startpunkt aus anzeigen kann, ähnlich wie folgt:

let netPositionBalance = Number(footerBalanceAtStart) - Number(footerBalance); //Während des Spiels sollte es auf $100 aktualisiert werden

Ich möchte, dass „footerBalanceAtStart“ so definiert wird, dass der Saldo nur einmal ermittelt wird und dann für die gesamte Projektdauer konstant bleibt.

Answer 1

所以我找到了答案。显然我也可以在这里使用useEffect，像这样：

const [footerBalanceAtStart, setAny] = useState(footerBalance);

现在它只会存储一次值，并且不会在没有状态更新函数setAny()的情况下自动更改