动态显示对象数组

Question

使用 React，我试图将我的对象数组动态显示到侧面导航中。有没有一种有效的方法来清晰地映射和显示我的价值观？我尝试将选项卡和标题分成两个单独的数组并从选项卡中删除重复项。然后我能够映射和显示选项卡，但我将如何为标题执行此操作？有没有更简单的解决方案

类似的东西，但没有硬编码。

<div>Lead</div>
   <div>new lead</div>
   <div>reached out</div>
<div>Applicant</div>
   <div>new applicant</div>
   <div>recruiter screen</div>
<div>Interview</div>
   <div>exploratory chat</div>
   <div>hired</div>

我的对象数组：

nav = [
    {tab: "Lead", title: "new lead"},
    {tab: "Lead", title: "reached out"},
    {tab: "Applicant", title: "new applicant"},
    {tab: "Applicant", title: "recruiter screen"},
    {tab: "Interview", title: "exploratory chat"},
    {tab: "Interview", title: "hired"},
]

Answer 1

您是否在询问如何构建数据？如果是这样，您可以创建一个对象数组来将它们组合在一起，如下所示：

const nav = [
  { tab: "Lead", titles: [ "new lead", "reached out" ] },
  { tab: "Applicant", titles: [ "new applicant", "recruiter screen" ] },
  { tab: "Interview", titles: [ "exploratory chat", "hired" ] },
]

如果您首先需要将数组转换为这种数据结构，您可能需要利用Array.reduce 高阶方法。

nav.reduce((accumulator, navItem) => {
  const exists = accumulator.find((existingNav) => existingNav.tab === navItem.tab)

  if (exists !== undefined) {
    exists.titles.push(navItem.title)
  } else {
    accumulator.push({ tab: navItem.tab, titles: [ navItem.title ] })
  }

  return accumulator
}, [])

要将其呈现为所需的输出，您可以这样做：

nav.map((navItem) => (
  <>
    <div>{navItem.tab}</div>
    {navItem.titles.map((title) => <div>{title}</div>)}
  </>
))