为什么我的本地存储在页面刷新后没有保存答案

【问题标题】：Why my local storage is not saving after page refresh为什么我的本地存储在页面刷新后没有保存
【发布时间】：2021-05-31 00:08:44
【问题描述】：

在我的反应中，我有以下代码：

useEffect(() => {
        localStorage.setItem('level', level.toString())
        localStorage.setItem('currentExperience', currentExperience.toString())
        localStorage.setItem('challengesCompleted', challengesCompleted.toString())
    }, [level, currentExperience, challengesCompleted])

我不想在页面刷新时丢失这些数据！

【问题讨论】：

可能你在页面刷新时都设置为null。
我该如何解决这个问题？
不知道我说的是不是真的，先调查一下吧。
这个变量（level, currentExperience...）是如何初始化的？
使用 useState : const [level, setLevelUp] = useState(1) const [currentExperience, setCurrentExperience] = useState(30) const [challengeCompleted, setChallengeCompleted] = useState(0)

标签： reactjs local-storage use-effect

【解决方案1】：

useEffect 将在 level、currentExperience、challengeCompleted 的值发生变化时运行。当您刷新页面时，这些变量的值 night 不是您想要的值，但 useEffect 将运行并最终将值设置到本地存储。您需要在 if 条件中设置值或将其从 useEffect 中删除。

【讨论】：

你可以在你的使用效果中添加一个console.log来查看useEffect运行时的值是什么或者使用调试器并添加断点来查看发生了什么