Code qui ne s'exécute qu'une seule fois lorsque l'état d'un composant React est mis à jour

Question

J'ai un composant de réaction appelé index.tsx dans mon projet de jeu qui possède une variable qui met à jour l'état, en supposant que le composant s'actualise à chaque fois que l'équilibre de l'utilisateur change.

Je crée une fonction "position nette" où, au démarrage du jeu, le solde de l'utilisateur est enregistré comme valeur de référence et seuls les ajouts et soustractions pour chaque transaction doivent être effectués à partir de cette valeur de référence.

En supposant que l'utilisateur ait un solde de 5 000 $ au début (dans la variable footerBalance), l'étiquette Net Position affichera cette valeur comme 0 (dans la variable netPositionBalance), avec 5 000 $ comme base. Désormais, l'utilisateur gagne 100 $ lors du prochain jeu, son solde deviendra 5 100 $ (dans la variable footerBalance) et la position nette deviendra 100 $ (dans la variable netPositionBalance).

Ce qui se passe maintenant, c'est qu'une fois le solde mis à jour, le montant de ma position nette est également mis à jour, et comme il se trouve dans le même fichier de composants, la position nette devient 0.

J'espère que cela sera corrigé au début et que ce code particulier ne devra pas être restitué, quelle que soit la manière dont le composant est actualisé.

Le bloc de code pour obtenir le solde est le suivant :

const footerBalance = useAppSelector(state => state.app.footerUnformattedBalance); //Cela modifiera le solde, c'est-à-dire qu'il donnera 5 000 $ après avoir gagné 100 $. , cela deviendra 5 100 $

J'ai besoin d'une variable appelée footerBalanceAtStart pour pouvoir afficher la position nette (dans la variable netPositionBalance) à partir du point de départ, semblable à ce qui suit :

let netPositionBalance = Number(footerBalanceAtStart) - Number(footerBalance); //Pendant le jeu, il doit être mis à jour à 100 $

J'aimerais que "footerBalanceAtStart" soit défini pour obtenir le solde une seule fois, puis rester constant pendant toute la durée du projet.

Answer 1

J'ai donc trouvé la réponse. Apparemment, je peux utiliser useEffect ici aussi, comme ceci :

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

Maintenant, il ne stockera la valeur qu'une seule fois et ne changera pas automatiquement sans la fonction de mise à jour de l'état setAny()