如何从对象数组中正确匹配titles与content对应元素并渲染？

数据结构 #

const data = [
  {
    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.",
    ],
  }
];

需求 #

遍历上述数组，将每个对象中titles的第n个元素与content的第n个元素对应输出，即第一个title匹配第一个content，以此类推。

你的错误写法 #

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

问题分析 #

你现在的写法会先把所有title渲染完毕，再渲染所有content，完全无法实现一一对应的效果。另外外层map用index做key不够可靠，且JSX中返回多个兄弟元素需要用容器（比如div）或Fragment包裹。

正确实现方法 #

方法一：直接通过索引匹配对应元素 #

这种方式最简单直接，遍历titles数组时，利用当前索引取content中对应的元素：

{data.map((tab) => (
  <div key={tab.value}> {/* 用tab的唯一标识value做key，比index更稳定 */}
    {tab.titles.map((title, idx) => (
      <div key={idx} className="item-group">
        <h4>{title}</h4>
        <p>{tab.content[idx]}</p>
      </div>
    ))}
  </div>
))}

方法二：先合并数据再遍历 #

如果担心titles和content长度不一致，可以先把两组数据合并成对象数组，再遍历渲染，同时做容错处理：

{data.map((tab) => {
  // 合并titles和content为统一的对象数组
  const matchedItems = tab.titles.map((title, idx) => ({
    title,
    content: tab.content[idx] || '' // 若content长度不足，默认显示空字符串
  }));

  return (
    <div key={tab.value}>
      {matchedItems.map((item, idx) => (
        <div key={idx} className="item-group">
          <h4>{item.title}</h4>
          <p>{item.content}</p>
        </div>
      ))}
    </div>
  );
})}

注意事项 #

• 尽量避免使用数组的index作为组件key，优先使用数据中的唯一标识（比如示例中的tab.value），防止组件复用导致的渲染异常。
• 如果业务中存在titles和content长度不匹配的情况，一定要添加容错逻辑，避免出现undefined的展示问题。

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