React中LocalStorage getItem异常：setItem正常但读取失效

原代码存在的问题 #

1. 初始状态不符合预期：useState直接用DUMMY_DATA初始化，导致组件首次渲染必然显示完整的初始数据，之后才会被useEffect里的localStorage数据覆盖，出现不必要的状态闪烁；且首次无缓存时会把DUMMY_DATA存入localStorage，和你期望的「首次显示空数组」不符。
2. 时序逻辑冗余：useEffect的执行时机在组件首次渲染之后，无法避免初始状态的错误展示。

修复代码 #

// 初始化时直接从localStorage读取，无数据则用空数组
const [transactions, setTransactions] = useState(() => {
  const savedTransactions = localStorage.getItem('transactions');
  return savedTransactions ? JSON.parse(savedTransactions) : [];
});

// 状态变化时同步更新localStorage
useEffect(() => {
  localStorage.setItem('transactions', JSON.stringify(transactions));
}, [transactions]);

说明 #

• 初始化状态时使用useState的函数式写法，只会在组件首次渲染时执行一次读取操作，避免重复读取localStorage。
• 新增的useEffect监听transactions变化，只要状态更新就同步到localStorage，保证缓存和状态始终一致。
• 首次加载时如果localStorage无数据，状态会初始化为空数组；后续修改状态后，刷新页面会直接读取缓存的修改后数据。

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