如何使用filter从数组筛选图片元素优化React轮播渲染？

你可以通过先过滤再映射的方式解决这个问题：先用filter筛选出仅图片类型的元素，再对筛选后的数组执行map渲染，这样就不会生成空白的轮播幻灯片了。

修改后的代码 #

const renderSlides = attachmentInfo
  // 先过滤出图片类型的元素
  .filter(item => item.contentType === 'image/jpeg')
  // 再对过滤后的元素进行渲染
  .map((item, index) => (
    <div key={item.id || index}> {/* 优先使用item的唯一ID作为key，没有的话再用index */}
      <img src={item.url} />
      <p className="legend">{item.name}</p>
    </div>
  ));

说明 #

1. filter方法会遍历数组，只保留返回true的元素，这里我们筛选出contentType为image/jpeg的项，直接排除非图片类型的元素。
2. 经过过滤后，map只处理有效的图片元素，每个生成的轮播项都包含图片内容，不会出现空白幻灯片。
3. 如果需要支持更多图片格式（比如png、gif），可以把过滤条件改成：

   .filter(item => item.contentType.startsWith('image/'))
   

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