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

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 [];
}
})

当我对itemsString执行JSON.parse()时，状态中的日期已被转换为UTC（因为它是字符串/本地存储）

我该如何对我的状态执行JSON.parse()并重新初始化日期字符串为对象？

例如，不要返回2019-07-19T00:28:03.058Z，而是返回Thu Jul 18 2019 20:28:03 GMT-0400 (Eastern Daylight Time)

通过Aaron的建议，我想出了以下解决方案。

存储旧状态。映射状态数组，创建新的空对象并将每个属性存储在其中，存储日期，将日期转换为字符串，并将其传递到新的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 [];
}
})

- gwar9

Answer 1

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

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

- Aaron

---

很不幸，这并不起作用，它会导致我的应用程序崩溃，我必须清除我的站点数据。一旦我这样做并重新运行，刷新后我的状态根本没有被应用。供参考，我尝试的实现是try { const object = JSON.parse(itemsString); const newState = {...object, date: new Date(object.date)} return newState } - gwar9

数据的结构是什么？你需要根据它进行调整。我不知道在解析后对象看起来像什么。 - Aaron

JSON.parse(itemsString) might return something like [{…}] 0: {id: "2019-07-19T01:45:29.929Z", item: "Couch", date: "2019-07-19T01:45:21.376Z", cost: "78", type: "expense"} length: 1 __proto__: Array(0) - gwar9

明白了。然后循环遍历数组中的每个对象，并像上面所做的那样重新设置日期。 - Aaron