localStorage调用getItem返回null 刷新页面后取值失效问题

问题原因 #

• 读取本地存储的useEffect仅对返回结果做了解析操作，没有将解析后的值回写到chart状态，导致状态始终保留初始值，后续存储操作会用初始值覆盖本地已存储的内容
• useEffect依赖数组语法错误：原代码中将依赖数组写为localStorage.setItem的第三个参数，属于无效写法，依赖数组必须作为useEffect的第二个参数传入；两个副作用都没有正确配置依赖，会导致每次组件渲染都重复执行逻辑，引发覆盖问题
• 组件内定义的chartStorageKey是每次渲染都会重新生成的引用类型值，直接作为依赖会导致副作用不必要的频繁触发

修复方案 #

调整副作用的执行逻辑和依赖配置，读取本地存储后先更新状态，状态变化后再同步到本地存储即可，参考代码如下：

const [chart, setChart] = useState([
  empty,
  empty,
  empty,
  empty,
  empty,
  empty,
  empty,
  empty,
]);

// 组件挂载时读取本地存储还原状态
useEffect(() => {
  const persistChart = localStorage.getItem("chart");
  if (persistChart) {
    const savedKeys = JSON.parse(persistChart);
    // 此处根据你的业务逻辑将key数组还原为chart状态数组即可
    // 如果不需要单独存key，可以直接存储整个chart数组，还原时直接调用setChart(JSON.parse(persistChart))
    const restoredChart = savedKeys.map(key => {
      // 你的key转chart项的逻辑，比如根据key匹配对应的配置项
      return /* 还原后的chart项 */
    })
    setChart(restoredChart)
  }
}, [])

// chart状态变更时同步到本地存储
useEffect(() => {
  const chartStorageKey = chart.map(item => item.key)
  localStorage.setItem("chart", JSON.stringify(chartStorageKey))
}, [chart])

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