Question

我正在通过localStorage在我的React应用程序中保存状态

const [items, setItem] = useState(() => {
let itemsString = window.localStorage.getItem('items');
if (itemsString) {
  try {
    return JSON.parse(itemsString);
  } catch (e) {
    console.error(e);
    return [];
  }
} else {
  return [];
}
})

当我JSON.parse(itemsString)的日期已转换为UTC时（因为字符串/本地存储）

如何JSON.parse()声明状态并将日期字符串重新初始化为对象？

例如而不是返回2019-07-19T00：28：03.058Z而是返回2019年7月18日星期四20:28:03 GMT-0400（东部夏令时间）

解决方案我在下面提出了亚伦的建议。

存储旧状态。映射状态数组，创建一个新的空对象并在其中存储每个属性，存储日期，将日期转换为字符串，然后将其传递到新的Date对象中，以将该值实例化回页面刷新时的日期对象。

const [items, setItem] = useState(() => {
let itemsString = window.localStorage.getItem('items');
if (itemsString) {
  try {
    const oldState = JSON.parse(itemsString);
    const newState = oldState.map(item => {
      const date = item.date;
      const container = {} 
      container.id = item.id
      container.item = item.item
      container.date = new Date(date.toString())
      container.cost = item.cost
      container.type = item.type
      return container;
    })

    return newState;
  } catch (e) {
    console.error(e);
    return [];
  }
} else {
  return [];
}
})

Answer 1

解析itemString之后，只需将日期键设置为新的Date对象

const object = JSON.parse(itemString);
const newState = {...object, date: new Date(object.date)}

将状态数组中的日期转换回Date对象

1 个答案: