从localStorage读取日期后调用getFullYear()方法的问题求解

JSON.stringify处理Date对象时会默认将其转为ISO格式字符串，JSON.parse反序列化时不会自动把该字符串还原为Date实例，因此字符串类型的值无法直接调用Date原型上的getFullYear()方法。

在读取localStorage数据、完成JSON反序列化后，遍历所有数据项将日期字段重新转为Date实例，再存入组件state即可。修改后的可直接运行代码如下：

const formDepositsData = [];
const [depositsData, setDepositsData] = useState(formDepositsData);

// 组件初始化时读取本地持久化数据
useEffect(() => {
  const storageValue = localStorage.getItem("deposits");
  if (!storageValue) return;

  try {
    const parsedData = JSON.parse(storageValue);
    // 遍历转换日期字段，将下方的depositDate替换为你实际使用的日期字段名
    const formattedData = parsedData.map(item => ({
      ...item,
      depositDate: item.depositDate ? new Date(item.depositDate) : null
    }));
    setDepositsData(formattedData);
  } catch (err) {
    // 捕获解析异常，清除脏数据避免页面报错
    console.error("存款数据解析失败：", err);
    localStorage.removeItem("deposits");
  }
}, []);

// 数据变更时同步写入本地存储
useEffect(() => {
  localStorage.setItem("deposits", JSON.stringify(depositsData));
}, [depositsData]);

使用说明 #

• 代码中的depositDate是示例字段名，需要替换为你业务代码里实际存储日期的字段，比如createTime、tradeDate等
• 转换前做了空值判断，避免日期字段为空时生成无效Date实例，导致后续调用方法报错
• 增加了JSON解析异常捕获，避免本地存储被手动篡改、存入非标准格式数据时引发页面白屏

转换完成后，你就可以在业务逻辑里直接调用日期方法获取年份了，示例：

// 渲染列表时获取存款年份
{depositsData.map(item => (
  <div key={item.id}>
    存款年份：{item.depositDate ? item.depositDate.getFullYear() : "暂无数据"}
  </div>
))}

如果你的数据存在多层嵌套、或者有多个日期字段，只需要在格式化数据的步骤里，对应每个日期字段做new Date()转换即可。

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