如何正确从对象获取数据

Question

我有一个包含这样的对象的数组：

{
    tab: "Quality Assurance",
    value: "qa",
    titles: [
      "Web App Interfaces3",
      "Backend Application Development",
      "Single-page Apps",
      "Technical Backend Audit",
    ],
    content: [
      "3We build web apps and websites with clean architecture and user-friendly interfaces.",
      "We build web apps and websites with clean architecture and user-friendly interfaces.",
      "We build web apps and websites with clean architecture and user-friendly interfaces.",
      "We build web apps and websites with clean architecture and user-friendly interfaces.",
    ],
}

我想迭代这个数组并获得下一个输出：

“Web 应用程序接口3” “3我们构建具有简洁架构和用户友好界面的网络应用程序和网站。”

“后端应用程序开发”， “我们构建具有简洁架构和用户友好界面的网络应用程序和网站。”

即标题中的第一个元素和内容中的第一个元素等等

我尝试过，但这不是我需要的

{data.map((tab, index) => (
  {tab.titles.map((title) => {
    return <h4 key={index}>{title}</h4>;
  })}
  {tab.content.map((text) => {
    return <p key={index}>{text}</p>;  
  })}
))}

Answer 1

试试这个

{data.map((tab) => (
  tab.titles.map((title, index) => (
    <div key={index}>
      <h4>{title}</h4>
      <p>{tab.content[index]}</p>
    </div>
  ))
))}