Jotai + React:意外的重新渲染和意外的陈旧状态值

问题描述

我正在制作一款游戏,与大多数游戏一样,它具有可以从游戏中的任何其他地方触发的各种场景。

我选择使用 Jotai,因为我发现它非常容易用作全局状态管理工具。 Jotai 原子的行为有点像 setStateuseContext 的组合。

引导

我将玩家的能量存储在一个原子中。当能量达到 0 时,useEffect 组件中的 <EnergyLevel /> 会触发“全局事件状态”原子的变化。 更改会被父 <Game /> 组件选中,如果全局事件状态值是“结束游戏”值,则它有条件地呈现 <EndGame /> 组件。

用户可以单击“重新开始”,这会重置全局事件状态值和全局“活动屏幕”值,从而触发主菜单的呈现。此时,全局事件状态已显式设置为 NONE

用户点击“Load Last Game”时——它设置了一个“加载状态”原子——父<Game />组件重新渲染,它的useEffect有条件地调用一个派生的,写-只有原子从数据库获取最后保存的游戏并将所有其他原子设置为这些值。它还会将所有全局状态跟踪原子重置为新加载游戏的认值。

漏洞

从技术上讲,到目前为止,所有内容实际上都按预期呈现,但对于一个附加组件:<EndGame /> 组件在 {{1 }} 加载完毕。

进一步研究(并使用许多 console.logs),我发现在 <Game /> 的预期最终渲染(在 useEffect 之后)之后触发了另一个渲染,并且在那个意想不到的过程中阶段,显式设置为 <Game /> 的全局事件原子值以某种方式重置为旧的事件值。

问题

正如我在上面错误部分的第二段中提到的那样,是什么导致了额外的渲染周期?为什么 NONE 原子值在这种意外渲染期间发生变化?

代码

具有这种奇怪行为的可重现代码 is sandboxed here. 只需按照说明加载即可。

这里有一些片段来演示预期的逻辑:

eventTriggeredOfType

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)