即使控制台日志记录'localStorage.getItems（“items”）'返回有效字符串，从localStorage获取值的React状态也未定义

Question

我正在构建 Tenzies 游戏，并希望实现一项功能，将用户之前掷骰子的数量存储到 localStorage，并且我已经拥有将当前掷骰子数量呈现到 UI 的功能。我可以在 useEffect() 内设置前一个滚动值并存储代码以在状态中检索。控制台记录状态返回未定义，但控制台记录仅 'localStorage.getItem("key")' 返回我需要的字符串。

我基本上想做的是，当用户赢得游戏并开始新游戏时，初始化一个新状态，帮助存储该值，显示他们之前的滚动。

这是沙盒演示的链接

我创建了一个状态来更新用户玩游戏时的掷骰数。当用户赢得游戏时，我还尝试将该值保存为之前的掷骰值。控制台中不断出现未定义的情况。

Answer 1

当控制台在设置后立即记录 prevRolls 状态时，您看到未定义的原因是由于 React 状态更新是异步的。通过 setPrevRolls() 设置状态将触发重新渲染，但新的状态值不会立即可用。

有几种方法可以解决这个问题：

1. 使用setState的回调形式：

setPrevRolls(prevRollsFromLocalStorage, () => {
  console.log(prevRolls) // will have updated value
})

2. 状态更新后使用 useEffect 运行代码：

useEffect(() => {
  console.log(prevRolls) 
}, [prevRolls])

3. 稍后在组件重新渲染后访问 prevRolls，例如在渲染的 UI 中。

问题是当您尝试在设置后立即记录它时，React 尚未完成更新 prevRolls。使用回调、useEffect 或稍后在组件生命周期中访问来获取更新的值。

将异步状态更新行为确定为根本原因是解决 React 中此类问题的关键。