React项目刷新页面后localStorage存储的数据被清空如何解决？

问题原因 #

你的代码确实存在状态初始化错误的问题，这是导致刷新后数据被清空的直接原因：

• 原始代码中，你将accounts()函数从localStorage读取到的历史账户列表数据，错误赋值给了account状态，而实际用于存储账户列表、触发本地存储更新的accountList状态，初始值被写死为了空数组[]。
• 组件首次加载时，accountList是空数组，监听accountList变化的useEffect会立刻执行，直接把空数组写入覆盖掉localStorage里原本存储的Account List数据，就会出现刷新后数据全清的现象。

修正逻辑验证 #

你后续调整的状态初始化代码是正确的：

const [account, setAccount] = useState("");
const [accountList, setAccountList] = useState(accounts());

修正后accountList的初始值就是从本地存储读取到的历史数据，首次渲染时useEffect写入本地存储的也是正确的历史数据，不会出现覆盖清空的问题。

额外可优化点 #

• 你当前addAccount方法中，当判断id已存在时执行的setAccountList([...accountList])属于无效调用，没有修改状态值的情况下不需要执行状态更新逻辑，可以直接去掉这部分分支代码。
• 你贴出的原始代码中useEffect的结尾缺少右括号)，属于语法错误，实际运行时需要补全。

内容的提问来源于stack exchange，提问作者itsMe