NextJS中如何用if条件语句包裹.map函数实现视频条件渲染

问题分析 #

你的现有代码存在两处可优化的问题：

• 两个渲染块互相独立，当data.directory.videos为undefined/null时，第二段代码直接调用.map会抛出JS错误，导致页面渲染失败
• 仅判断videos是否存在逻辑不严谨，若videos是空数组，会出现只有「Featured On:」标题却没有视频列表的异常情况

正确实现 #

将标题和列表渲染逻辑用React Fragment（空标签）包裹，放在同一个条件分支内，同时判断videos存在且长度大于0即可：

{
  data.directory.videos?.length > 0 ? (
    <>
      <h2>Featured On:</h2>
      {data.directory.videos.map((video, i) => (
        <Col lg="6" key={i}>
          <Vyt id={video} height="200" />
        </Col>
      ))}
    </>
  ) : null
}

如果你更习惯短路运算符的写法，也可以写成：

{
  data.directory.videos?.length > 0 && (
    <>
      <h2>Featured On:</h2>
      {data.directory.videos.map((video, i) => (
        <Col lg="6" key={i}>
          <Vyt id={video} height="200" />
        </Col>
      ))}
    </>
  )
}

补充说明 #

• 代码中使用可选链运算符?.，可以避免videos为undefined时读取length属性报错
• 给map返回的列表项加上了key属性，符合React列表渲染规范，避免控制台抛出警告。如果video本身是唯一字符串，建议优先用key={video}替代索引i作为key值，性能更好。

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