React中JSX渲染嵌套数组map遍历无数据显示问题求解

无渲染核心原因 #

• 箭头函数未显式返回JSX：你使用了带花括号{}的箭头函数写法，但没有写return语句，导致两次map方法最终返回的都是全undefined的数组，React不会渲染undefined内容。
• 同级JSX节点未包裹：外层map的回调中同时返回了<h1>和内层map生成的<p>列表，多个同级JSX节点必须用一个父节点（比如<div>、<React.Fragment>或简写<>）包裹，否则会触发语法错误阻止渲染。
• （可选规范问题）内层遍历的<p>标签未添加key属性，会触发React的列表key警告，虽不直接导致不渲染，但属于必须修复的规范问题。

修正后的代码示例 #

// 写法1：显式return + Fragment包裹，逻辑清晰
modulesdata.map((module, index) => {
  return (
    <React.Fragment key={index}>
      <h1>module{index}</h1>
      {module.map((mod, i) => {
        return <p key={mod.id || i}>{mod.name}</p>
      })}
    </React.Fragment>
  )
})

// 写法2：箭头函数隐式返回（省略花括号和return），写法更简洁
modulesdata.map((module, index) => (
  <React.Fragment key={index}>
    <h1>module{index}</h1>
    {module.map((mod, i) => (
      <p key={mod.id || i}>{mod.name}</p>
    ))}
  </React.Fragment>
))

注：内层key优先用业务唯一的mod.id赋值，没有再用遍历下标兜底，符合React列表渲染最佳实践。

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