需要在状态更新反应组件中仅运行一次代码块答案

【问题标题】：Need to run a block of code ONLY ONCE in a state updating react component需要在状态更新反应组件中仅运行一次代码块
【发布时间】：2023-02-15 14:50:34
【问题描述】：

我的游戏项目中有一个反应组件 index.tsx，它具有状态更新变量，假设每次用户余额发生变化时组件都会刷新。
我正在创建一个“净头寸”功能，在开始游戏时将用户余额保存为参考，然后它应该仅从该参考中 +/- 每笔交易。
假设用户开始时的余额为 5000 美元（在 footerBalance 变量中），因此净头寸标签将值显示为 0（在 netPositionBalance 变量中），5000 美元被视为基础。现在用户在下一次游戏中赢得 100 美元，他的余额将变为 5100 美元（在 footerBalance 变量中），净头寸将变为 100 美元（在 netPositionBalance 变量中）。
现在发生的事情是，一旦余额更新，我的净头寸资金也会更新，因为它在同一个组件文件中，净头寸变为 0。
我希望在一开始就修复这个问题，并且无论组件是否刷新，这个特定的代码都不应该重新呈现。

获取余额的代码块是：

const footerBalance = useAppSelector(state => state.app.footerUnformattedBalance); //this changes balance ie it'll give $5000, and on winning $100 it'll change to $5100

我需要一个 footerBalanceAtStart 变量，以便我可以从起点显示净位置（在变量 netPositionBalance 中），如下所示：

let netPositionBalance = Number(footerBalanceAtStart) - Number(footerBalance); //it should update to $100 on gameplay

我希望将“footerBalanceAtStart”定义为仅获取一次余额，然后在整个项目期间保持不变。

【问题讨论】：

标签： reactjs typescript state-management

【解决方案1】：

所以我得到了答案。显然我也可以在这里使用 useEffect，比如：

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

现在它只会存储一次值，并且在没有状态更新功能的情况下不会自行更改设置任意()

【讨论】：