从数组 React.js 中删除丢失的图像

Question

我有来自外部 API 的图像数组，我想过滤损坏的图像，然后再将它们显示在轮播上。正如您现在所看到的，如果图像丢失，我会映射每个图像并将 MissingImage 组件显示为卸载程序，但在我的情况下，有时 API 上无法使用一半以上的图像。如果图像在传递给 Carousel 组件之前不可用，我该如何跳过它们？

          {images.map((img, i) => (
        <Dot
          key={i}
          type="button"
          onClick={() => {
            setThumbsPosition(i);
            goToSlide(i);
            setActiveSlide(i);
          }}
          active={activeSlide === i}
          ref={i === 0 && slideRef}
        >
          <SliderDotImage>
            <Img
              loading="lazy"
              src={[img.url.bigger]}
              unloader={<MissingImage small />}
            />
          </SliderDotImage>
        </Dot>
      ))}

Answer 1

您可以使用 && 运算符来检查我们是否有图片 URL：

{images.map((img, i) => (
        <Dot
          key={i}
          type="button"
          onClick={() => {
            setThumbsPosition(i);
            goToSlide(i);
            setActiveSlide(i);
          }}
          active={activeSlide === i}
          ref={i === 0 && slideRef}
        >
          <SliderDotImage>
            <Img
              loading="lazy"
              src={img?.url && img.url} // or src={img && img.url}
              unloader={<MissingImage small />}
            />
          </SliderDotImage>
        </Dot>
      ))}