React中使用双层map遍历对象内嵌套数组渲染报错如何解决？

问题排查及修复方案 #

错误原因 #

• 根元素缺失：React 不允许在单个return语句中返回多个相邻的无包裹 JSX 元素，你外层map的return里同时返回了title对应的<p>标签和description遍历的内容，属于语法错误。
• key取值错误：你给外层列表项设置的key={element.key}，但你的源数据中每个对象的唯一标识字段是id，不存在key属性，会导致key非法。

修复后代码 #

{timelineElements.map((element) => {
  return (
    // 使用空标签<></>作为React.Fragment的简写，包裹多个同级元素，不会产生多余DOM节点
    <>
      <p key={element.id}>{element.title}</p>
      {/* 可选链?.简化判断，兼容description为空的场景 */}
      {element.description?.map((desc, index) => {
        // 拼接key保证全局唯一，避免不同条目下描述重复导致key冲突
        return <p key={`${element.id}-desc-${index}`}>{desc}</p>
      })}
    </>
  )
})}

额外优化建议 #

如果需要给条目加样式，也可以把<>...</>替换为<div className="timeline-item"></div>，方便后续样式定制。

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