React中map遍历渲染列表无UI显示问题求助

错误原因分析 #

你的代码存在两个关键问题导致UI不渲染：

1. map回调函数未返回JSX元素：使用大括号{}包裹箭头函数体时，必须显式用return返回JSX；如果省略return，需用小括号()包裹JSX实现隐式返回。
2. 列表结构不匹配：静态示例中每个菜单项对应一个<li>，但你的遍历代码把所有项都放在同一个<li>内部，既不符合语义，也会导致样式逻辑不匹配。

修正后的代码 #

<ul className="sub-menu--mega__list">
  {categoryData && categoryData.map((singleCategory, i) => (
    <li key={i}>
      <div
        onMouseOver={handleMouseOver}
        onMouseOut={handleMouseOut}
      >
        <Link
          href="/shop/left-sidebar"
          as={process.env.PUBLIC_URL + "/shop/left-sidebar"}
        >
          <a>{singleCategory.name}</a>
        </Link>
      </div>
    </li>
  ))}
</ul>

关键修改说明 #

• 将map的箭头函数体从大括号{}改为小括号()，实现JSX的隐式返回，确保每个遍历项的内容能被正确返回并渲染。
• 把<li>标签移到map的遍历内部，让每个分类项对应一个独立的<li>，和你手动编写的静态结构保持一致，同时符合<ul>与<li>的语义规范。
• 额外建议：尽量避免使用索引i作为key，如果categoryData里存在唯一标识（比如id字段），建议用singleCategory.id作为key，这能提升React渲染性能并避免潜在的状态异常。

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