Kod yang hanya berjalan sekali apabila keadaan komponen React dikemas kini

Question

Saya mempunyai komponen tindak balas yang dipanggil index.tsx dalam projek permainan saya yang mempunyai pembolehubah yang mengemas kini keadaan, dengan mengandaikan bahawa komponen itu menyegarkan setiap kali baki pengguna berubah.

Saya sedang mencipta fungsi "kedudukan bersih" di mana apabila memulakan permainan, baki pengguna disimpan sebagai nilai rujukan dan kemudian hanya penambahan dan penolakan untuk setiap transaksi harus dibuat daripada nilai rujukan itu.

Dengan mengandaikan pengguna mempunyai baki $5000 pada permulaan (dalam pembolehubah footerBalance), maka label Kedudukan Bersih akan menunjukkan nilai tersebut sebagai 0 (dalam pembolehubah netPositionBalance), dengan $5000 sebagai asas. Kini pengguna memenangi $100 dalam permainan seterusnya, bakinya akan menjadi $5100 (dalam pembolehubah footerBalance) dan kedudukan bersih akan menjadi $100 (dalam pembolehubah netPositionBalance).

Apa yang berlaku sekarang ialah sebaik sahaja baki dikemas kini, jumlah kedudukan bersih saya juga dikemas kini, dan kerana ia berada dalam fail komponen yang sama, kedudukan bersih menjadi 0.

Saya harap perkara ini dibetulkan pada mulanya dan kod tertentu ini tidak seharusnya dipaparkan semula, tidak kira bagaimana komponen itu disegarkan semula.

Blok kod untuk mendapatkan baki adalah seperti berikut:

const footerBalance = useAppSelector(state => state.app.footerUnformattedBalance); //Ini akan menukar baki, iaitu ia akan memberikan $5000 selepas memenangi $100 Selepas itu , ia akan menjadi $5100

Saya memerlukan pembolehubah yang dipanggil footerBalanceAtStart supaya saya boleh memaparkan kedudukan bersih (dalam pembolehubah netPositionBalance) dari titik permulaan, serupa dengan yang berikut:

let netPositionBalance = Number(footerBalanceAtStart) - Number(footerBalance);
Saya ingin "footerBalanceAtStart" ditakrifkan untuk mendapatkan baki sekali sahaja dan kemudian kekal malar untuk keseluruhan tempoh projek. 
            

Answer 1

Jadi saya jumpa jawapannya. Nampaknya saya boleh menggunakan useEffect di sini juga, seperti ini:

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

Kini ia hanya akan menyimpan nilai sekali dan tidak akan berubah secara automatik tanpa fungsi kemas kini keadaan setAny()