React中嵌套数组map渲染仅显标题，子项不渲染问题排查

问题重现 #

你有如下数据结构：

{
  title: "Category title",
  description: "Example description",
  lists: [
    {
      id: "popular",
      title: "Popular",
      items: [
        {
          id: 1,
          title: "title",
          provider: "provider",
          image: ""
        },
        // ...更多子项
      ]
    },
    {
      id: "new",
      title: "New",
      items: [
        {
          id: 4,
          title: "title4",
          provider: "provider",
          image: ""
        },
        // ...更多子项
      ]
    }
  ]
}

使用嵌套map渲染时，仅<h3>标题能显示，<h2>子项无法渲染，原代码如下：

return (
    <>
      {iconItems?.lists.map((icon, i) => {
        return (
          <>
            <h3 key={i}>{icon.title}</h3>
            {icon.items.map((i) => {
              <h2 key={i.id}>{i.title}</h2>;
            })}
          </>
        );
      })}
    </>
  );

问题原因 #

内层的icon.items.map回调函数里，你只是写了JSX元素，但没有返回它。当箭头函数使用花括号{}包裹代码时，必须显式用return返回值，否则map不会生成任何元素。

修正方案 #

有两种方式解决：

方式1：显式添加return #

return (
    <>
      {iconItems?.lists.map((icon, i) => {
        return (
          <>
            <h3 key={i}>{icon.title}</h3>
            {icon.items.map((item) => {
              // 显式return JSX元素
              return <h2 key={item.id}>{item.title}</h2>;
            })}
          </>
        );
      })}
    </>
  );

方式2：使用箭头函数隐式返回（去掉花括号） #

去掉内层map回调的花括号，让箭头函数自动返回JSX元素：

return (
    <>
      {iconItems?.lists.map((icon, i) => {
        return (
          <>
            <h3 key={i}>{icon.title}</h3>
            {icon.items.map((item) => (
              // 用圆括号包裹JSX，实现隐式返回
              <h2 key={item.id}>{item.title}</h2>
            ))}
          </>
        );
      })}
    </>
  );

另外建议把内层map的参数名从i改成item，避免和外层的索引变量i重名，提高代码可读性。

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