Javascript 如何从同一阵列中呈现不同的媒体类型？

我试图在react js应用程序中呈现视频、图像和文档。我正在单个数组中获取所有文件。我正在从“媒体”阵列连接单个对象。我得到文件类型和文件名。所以我已经映射到一个媒体数组，并使用if语句进行渲染，但它不起作用。我还附加了渲染方法

       {totalCombinedMediaToShow && totalCombinedMediaToShow.length > 0 && totalCombinedMediaToShow.map((allMedia) => {
              if(allMedia.type == "documents"){
              return <Card className={classes.postMedia} id="document1">
                <a
                  href={
                    process.env.REACT_APP_BACKEND_FILE_PREVIEW +
                    allMedia.file_name
                  }
                  style={{ color: "blue" }}
                  target="_blank"
                >
                     {allMedia && allMedia.file_name && 
                      allMedia.file_name.substr(
                        allMedia && allMedia.file_name.lastIndexOf("/") + 1,
                        allMedia && allMedia.length
                      )}
                      
                </a>
              </Card>
              } if(allMedia.type == "images") {
               return <Card
                className={classes.postMedia}
                onClick={() => {
                  dispatch({
                    type: SHOW_POST_MEDIA_PREVIEW,
                    payload: {
                      id: post.id,
                      showPreview: true,
                    },
                  });
                }}
              >
                <img
                  width="200"
                  height="115"
                  src={
                    process.env.REACT_APP_BACKEND_FILE_PREVIEW +
                    allMedia.file_name
                  }
                  alt=""
                />
              </Card>
              } if(allMedia.type == "videos") {
             return <Card
                className={classes.postMedia}
                onClick={() => {
                  dispatch({
                    type: SHOW_POST_MEDIA_PREVIEW,
                    payload: {
                      id: post.id,
                      showPreview: true,
                    },
                  });
                }}
              >
                <video width="200" controls>
                  <source
                    src={
                      process.env.REACT_APP_BACKEND_FILE_PREVIEW +
                      allMedia.file_name
                    }
                  />
                </video>

              </Card>
              }
            })}

---

如果没有提供上下文、调试细节或错误，那么“它不工作”实际上是一个毫无意义的技术问题陈述。请更具体地说明什么不工作。有错误吗？观察到的实际结果与预期结果是什么？“不工作”在某种意义上，我没有得到任何错误，此外，没有显示任何媒体。您是否可以创建一个运行的代码沙盒，以复制我们可以检查和现场调试的问题，并使用指向该问题的链接更新您的问题？映射函数中的

allMedia

int的值是多少？它是否与您在“数据”下发布的形状匹配？我猜想所有

if

语句都返回false，因为数据不是您期望的

{
  file_name: "/media/post_files/images_Y8XKDmV.png"
  file_path: "D:\\My Work\\backend\\media\\post_filesimages.png"
  id: 157
  type: "images"
}