时间戳

首页 > 解决方案 > FS 访问 api & React：重复条目

reactjs - FS 访问 api & React：重复条目

问题描述

我正在尝试构建一个电影仪表板（类似于 Plex）；用户选择一个文件夹，文件夹中的所有电影都会显示出来。使用新的文件系统访问 API 允许我动态创建文件处理程序并能够使用浏览器视频播放器显示电影。

我面临的问题是重复的条目，例如“捉鬼敢死队”（无法真正理解为什么，但这是导致问题的唯一原因）

这是文件系统的基本实现：

try {
  const folderHandle = await window.showDirectoryPicker();
  const addedFilms = [];
  history.push('/list');
  // const entries = await folderHandle.values()
  const entries = await folderHandle.values();
  for await (const entry of entries) {
    const movie = await readMoviesonDisk(folderHandle, entry);
    console.log(addedFilms);
    if (addedFilms.includes(entry.name)) continue;
    addedFilms.push(entry.name);
    setMovies((movies) => [...movies, movie]);
  }
} catch (error) {
  alert('Alert from reading files:  ' + error);
}

setMovies只需将 a 设置Context为movies数组，readMoviesOnDisk如下所示：

const readMoviesonDisk = async (folderHandle, entry) => {
  if (entry.kind === 'file' && entry.name.endsWith('.mp4')) {
    const path = await folderHandle.resolve(entry);
    const handle = await folderHandle.getFileHandle(path);
    const movie = await getMovie(entry.name);
    if (movie) {
      return { ...movie.data, file: handle, name: entry.name };
    }
    const movieData = await searchMovie(entry.name);
    if (movieData) {
      const actualData = await getMovieDetails(movieData.id);
      if (actualData !== undefined) {
        await insertMovie(entry.name, actualData, handle);
      } else {
        await insertMovie(entry.name, actualData, handle);
      }
      return { ...actualData, file: handle, name: entry.name };
    }
    return { name: entry.name, file: handle };
  }
};

searchMovie并且insertMovie仅与 IndexedDB 交互以存储电影信息以供离线使用。getMovieDetails对 TMDB 进行 API 调用以获取电影信息。

我用于显示电影的键是它们的 TMDB id。捉鬼敢死队的 id 是“620”。

谁能帮我？

标签： reactjswebapifilesystem-access

解决方案

如果没有额外的背景，似乎不可能正确回答这个问题。您可以遍历文件夹中的所有文件并仅记录名称和种类吗？这应该可以工作并且不会显示重复的条目。

const dirHandle = await window.showDirectoryPicker();
for await (const entry of dirHandle.values()) {
  console.log(entry.kind, entry.name);
}

推荐阅读