React：渲染关联数组答案

【问题标题】：React : render over an associative arrayReact：渲染关联数组
【发布时间】：2021-09-26 09:59:09
【问题描述】：

我有一个这样的关联数组：

const data = []
data["01/01/2021"] = [1, 2, 3]
data["01/02/2021"] = [4, 5, 6]
data["01/03/2021"] = [7, 8, 9]

我尝试过这样的事情：

return(
  {data.map(d => <tr>{d // some stuff here to access the correct item, it's typed}</tr>}
)

但我认为我不能在关联数组上这样做。我一直在想我应该使用 Map() 来代替，因为它是键/值集合，我只需要以正确的方式对键进行排序，我想我什至可以在 Map() 上做到这一点？

感谢您的留言，我已经有一段时间了...

【问题讨论】：

输出中没有任何内容，我已经设置了一个断点，它不会进入循环，另外我认为我不能在关联数组上以这种方式使用 map() 函数？
JavaScript 没有关联数组。见stackoverflow.com/a/37516003/3903374。你希望输出是什么？是否应该同时包含日期和值？
我看到这是创建对象的数组语法...是的，我需要遍历日期，然后遍历对应数组中的项目。在页面中，我想要第一行的日期，然后是数组的每个元素的新行，然后是下一个日期的新行等。我来自 Java，我认为 Map() 是合适的，然后我可以用 myDataMap.forEach((values, key) => {return(blabla)})) 循环它?
日期 1 2 日期 3 4
TR 元素的唯一有效子元素是 TD 或 TH。

标签： javascript arrays reactjs sorting

【解决方案1】：

JavaScript 不支持关联数组。见https://stackoverflow.com/a/37516003/3903374

最好将data声明为对象，以免在维护程序时混淆：

const data = {};

您可以遍历 data 对象的 keys。

请注意，不能保证对象的键按任何顺序排列，即使您像以前那样在数组语法中指定 then 也是如此。因此，如果您希望它们按日期排序，则需要对其进行排序。

这会将所有日期及其数据放在单独的行中，按日期排序：

Object.keys(data)
  .sort((date1, date2) => new Date(date1) - new Date(date2))
  .map(date => (
     <tr>
       <td>{date}</td>
       {data[date].map(d => <td>{d}</td>)}
     </tr>
   ))

根据您对每个数据点应位于单独的行的评论，应该这样做：

Object.keys(data)
  .sort((date1, date2) => new Date(date1) - new Date(date2))
  .map(date => (
     <>
       <tr><td>{date}</td></tr>
       {data[date].map(d => <tr><td>{d}</td></tr>)}
     </>
   ))

【讨论】：