React.js中SidebarOption组件Prop值无法显示问题（Spotify克隆项目场景）

嘿，我一眼就发现问题所在了——你在playlists?.items?.map()里没有返回SidebarOption组件！虽然控制台能正常打印出playlist.name，但因为map函数没有返回任何JSX元素，页面自然不会渲染这些播放列表选项。

问题根源 #

当箭头函数使用大括号{}包裹函数体时，JavaScript不会自动返回函数内的内容，必须显式写出return语句。你当前的代码只是在map循环里执行了console.log和创建组件的操作，但没有把组件返回出去，所以循环结束后没有生成任何可渲染的元素。

两种修复方案 #

方案1：添加显式return语句

在map的函数体里，明确返回要渲染的SidebarOption组件：

{playlists?.items?.map((playlist) => {
  console.log(playlist.name);
  // 显式返回组件
  return <SidebarOption title={playlist.name} />;
})}

方案2：使用箭头函数的隐式返回

去掉大括号，直接写要返回的组件（多内容时可用圆括号包裹），同时别忘了加上React要求的唯一key属性（用playlist.id作为key是最佳选择）：

{playlists?.items?.map((playlist) => (
  <SidebarOption key={playlist.id} title={playlist.name} />
))}

修正后的完整Sidebar.js代码 #

function SideBar() {
  const [{ playlists }, dispatch] = UseDataLayerValue();
  console.log("user playlist from sidebar.js", playlists);

  return (
    <div className="sidebar">
      <img className="sidebar__logo" src="https://getheavy.com/wp-content/uploads/2019/12/spotify2019-830x350.jpg" alt="spotify-logo" />
      <SidebarOption Icon={HomeIcon} title="Home" />
      <SidebarOption Icon={SearchIcon} title="Search" />
      <SidebarOption Icon={LibraryMusicIcon} title="Your Library" />
      <br />
      <strong className="sidebar__title">PLAYLISTS</strong>
      <hr />
      {playlists?.items?.map((playlist) => (
        <SidebarOption key={playlist.id} title={playlist.name} />
      ))}
    </div>
  );
}

额外提示 #

如果之前的<h2>hi</h2>是测试代码，你可以直接删除；如果想保留，也可以用React Fragment包裹后一起返回：

{playlists?.items?.map((playlist) => (
  <>
    <h2>hi</h2>
    <SidebarOption key={playlist.id} title={playlist.name} />
  </>
))}

这样修改后，你的播放列表名称应该就能正常显示在侧边栏里啦！

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