如何在 JSX 中同时映射对象数据或两个数组答案

【问题标题】：How to map object data or two arrays at the same time inside JSX如何在 JSX 中同时映射对象数据或两个数组
【发布时间】：2021-03-10 20:28:52
【问题描述】：

我想我的问题很简单，但我无法解决。你能帮忙吗？我应该根据 JSON 数组数据做一个简单的图条数据可视化（下面是 JSON 数组的一部分）：

{
      name: "R",
      year: 1956,
    },
    {
      name: "K",
      year: 1956,
    },
    {
      name: "P",
      year: 1982,
    },
    {
      name: "E",
      year: 1982,
    },
    {
      name: "S",
      year: 1992,
    }

这个想法是将<tr><div>{year}</div><div className="graph-bar" style={{ width: '${amount}px' * 10 }}></div><div>{amount}</div></tr> 映射到每一行，以告知每年有多少个名字。于是我将 JSON 数组缩减为一个对象，并计算了重复年份的数量：

Object { 1956: 7, 1982: 11, 1983: 2, 1989: 1, 1990: 2, 1991: 2, 1993: 2, 1994: 1, 1996: 1, 1998: 1, … }.

我有两个问题：

我可以将上面 JSX 中的对象映射到上面给出的形式吗？
如何在内联 CSS 中使用乘数（在本例中为 10）？这不起作用：style={{ width: '${amount}px' * 10 }}。 我已经替换了内联样式中的反引号，因为我无法让它们在这里工作。如果没有乘数，反引号宽度正在工作。我也试过 calc() 但它不起作用。

作为 B 计划，我还制作了两个简单的数组：

years = [ 1956, 1982, 1983, 1989, 1990, 1991, 1993, 1994, 1996, 1998, … ]

amount = [ 7, 11, 2, 1, 2, 2, 2, 1, 1, 1, … ]

如果不可能映射一个对象，我该如何同时映射两个数组，或者有可能吗？

【问题讨论】：

标签： arrays json object jsx

【解决方案1】：

根据您提供的代码，很难真正确定您的目标是什么，但映射键值对可以使用：

for (const [key, value] of Object.entries(obj)) {
}

然后根据需要使用您的键值。

对于 2 号：

style={{width: `${amount * 10}px`}}

【讨论】：