如何对TypeScript Record<string, Formulaire>按date属性排序后展示？

我有一个类型为Record<string, Formulaire>的Record数据，目前通过以下代码将其渲染为列表：

Object.keys(obj).map((id) => (
  <li> {obj[id].content} - {obj[id].date} </li>
))

但我希望列表能按date属性排序后展示。我原本以为可以直接对Record调用sort方法，写法如下：

obj.sort((a,b) => ((a.date > b.date)? 1 : -1))

然而对象并没有sort方法，请问在渲染前对该数据进行排序的最优方式是什么？

我看到过「Sort JavaScript object by key」的相关问题，但我的场景不同：我使用的是TypeScript Record，希望按关联对象的属性而非键本身排序。

Record<string, Formulaire>本质是JavaScript对象，对象本身没有sort方法，所以得先把它转成可排序的数组，再按date属性排序后渲染，具体实现如下：

最优实现（保留原ID作为React key） #

用Object.entries()把Record转成[键, 值]格式的数组，这样既能保留原有的ID，又能拿到对应的Formulaire对象，排序后直接渲染即可：

Object.entries(obj)
  // 按date排序，若date是字符串需转成Date对象避免排序误差
  .sort(([, itemA], [, itemB]) => {
    const dateA = new Date(itemA.date);
    const dateB = new Date(itemB.date);
    return dateA.getTime() - dateB.getTime();
    // 若date是数字类型的时间戳，直接相减即可：return itemA.date - itemB.date;
  })
  .map(([id, item]) => (
    <li key={id}> {item.content} - {item.date} </li>
  ))

简化实现（无需保留原ID） #

如果渲染时不需要用到原Record的键（ID），可以用Object.values()直接提取所有Formulaire对象组成数组排序，注意用索引作为key仅适合静态排序后的列表：

Object.values(obj)
  .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
  .map((item, index) => (
    <li key={index}> {item.content} - {item.date} </li>
  ))

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