如何用数据库ID过滤Spotify API返回的播放列表

1. 提取数据库中的播放列表ID到集合 #

数据库返回的是包含playlist_id的对象数组，先把这些ID提取出来存成Set——这种数据结构的查找效率远高于数组，适合后续的匹配判断。用useMemo缓存这个集合，避免每次渲染重复计算：

import { useMemo } from 'react';

// ... 其他状态定义

const savedPlaylistIds = useMemo(() => {
  if (!myPlaylistId) return new Set();
  // 从数据库返回的数组中提取所有playlist_id存入Set
  return new Set(myPlaylistId.map(item => item.playlist_id));
}, [myPlaylistId]);

2. 修改播放列表合并逻辑，添加筛选步骤 #

在更新playlists状态时，先对Spotify返回的items进行过滤，只保留ID在savedPlaylistIds集合中的播放列表：

useEffect(() => {
  if (!playlistsData || !savedPlaylistIds.size) {
    return;
  }

  const fetchMoreData = async () => {
    if (playlistsData.next) {
      const { data } = await axios.get(playlistsData.next);
      setPlaylistsData(data);
    }
  };

  // 过滤出与数据库ID匹配的播放列表
  const matchedPlaylists = playlistsData.items.filter(playlist => 
    savedPlaylistIds.has(playlist.id)
  );

  setPlaylists((prevPlaylists) => [
    ...(prevPlaylists || []),
    ...matchedPlaylists
  ]);

  catchErrors(fetchMoreData());
}, [playlistsData, savedPlaylistIds]); // 添加savedPlaylistIds作为依赖

3. 处理数据加载顺序问题 #

如果数据库的ID还没加载完成，savedPlaylistIds是空集合，此时不会添加任何播放列表。等数据库数据加载完成后，需要重新过滤已加载的Spotify播放列表，确保匹配项不会遗漏：

useEffect(() => {
  if (!playlists || !savedPlaylistIds.size) return;
  
  // 重新过滤已加载的所有播放列表
  const filtered = playlists.filter(playlist => savedPlaylistIds.has(playlist.id));
  setPlaylists(filtered);
}, [savedPlaylistIds, playlists]);

完整核心代码片段 #

整合上述修改后的关键代码如下：

import { useState, useEffect, useMemo } from 'react';

// ... 其他导入

const YourComponent = () => {
  const [playlistsData, setPlaylistsData] = useState(null);
  const [playlists, setPlaylists] = useState(null);
  const [myPlaylistId, setMyPlaylistId] = useState(null);

  // 提取数据库中的播放列表ID集合
  const savedPlaylistIds = useMemo(() => {
    if (!myPlaylistId) return new Set();
    return new Set(myPlaylistId.map(item => item.playlist_id));
  }, [myPlaylistId]);

  // 获取数据库中的播放列表ID
  useEffect(() => {
    const getPlaylistId = async () => {
      const response = await fetch("http://localhost:5001/myplaylists");
      const id = await response.json();
      setMyPlaylistId(id);
    };
    getPlaylistId();
  }, []);

  // 获取Spotify用户播放列表初始数据
  useEffect(() => {
    const fetchData = async () => {
      const { data } = await getCurrentUserPlaylists();
      setPlaylistsData(data);
    };
    catchErrors(fetchData());
  }, []);

  // 加载更多播放列表并筛选匹配项
  useEffect(() => {
    if (!playlistsData || !savedPlaylistIds.size) {
      return;
    }

    const fetchMoreData = async () => {
      if (playlistsData.next) {
        const { data } = await axios.get(playlistsData.next);
        setPlaylistsData(data);
      }
    };

    const matchedPlaylists = playlistsData.items.filter(playlist => 
      savedPlaylistIds.has(playlist.id)
    );

    setPlaylists((prev) => [...(prev || []), ...matchedPlaylists]);
    catchErrors(fetchMoreData());
  }, [playlistsData, savedPlaylistIds]);

  // 当数据库ID更新后，重新过滤已加载的播放列表
  useEffect(() => {
    if (!playlists || !savedPlaylistIds.size) return;
    setPlaylists(prev => prev.filter(p => savedPlaylistIds.has(p.id)));
  }, [savedPlaylistIds, playlists]);

  // 渲染部分不变
  return (
    <main>
      <SectionWrapper>
        {playlists && <PlaylistsGrid playlists={playlists} />}
      </SectionWrapper>
    </main>
  );
};

export default YourComponent;

逻辑说明 #

• 用Set存储ID是因为Set.has()的查找时间复杂度为O(1)，比数组includes()的O(n)效率更高，尤其适合ID数量较多的场景。
• 每次加载新的Spotify播放列表时就进行筛选，避免后续重复处理大量数据。
• 额外的useEffect确保数据库ID加载完成后，已加载的播放列表会被重新过滤，不会漏掉匹配项。

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