如何过滤获取含有效Rating与非空PlayProviders的电影数据？

一、尝试通过API查询参数直接过滤 #

既然无法修改API代码，优先尝试用API支持的查询参数来过滤数据，减少前端处理压力。常见的REST API过滤规则可以试试这些参数组合：

1. 基础过滤参数（常见格式） #

• 过滤rating非空：rating__ne=null 或 rating.exists=true
• 过滤playProviders非空：playProviders__size_gt=0 或 playProviders.exists=true
  组合后的请求URL示例：

https://api.com/movies?orderBy=views&rating__ne=null&playProviders__size_gt=0

2. 通用filter参数（部分API支持） #

如果API支持filter参数接收JSON格式的过滤条件，转义后的URL示例：

https://api.com/movies?orderBy=views&filter=%7B%22rating%22%3A%7B%22%24ne%22%3Anull%7D%2C%22playProviders%22%3A%7B%22%24ne%22%3A%5B%5D%7D%7D

对应的原始JSON过滤条件是：

{"rating":{"$ne":null},"playProviders":{"$ne":[]}}

3. 简化参数尝试 #

有些API会提供更直观的参数，比如：

https://api.com/movies?orderBy=views&hasRating=true&hasPlayProviders=true

如果有API文档的话优先查看确认支持的过滤规则；没有的话，逐个测试上述参数，看返回结果是否符合预期。

二、前端优化过滤逻辑（API不支持过滤时） #

如果API完全不支持过滤，就需要前端多页请求来凑够每页15条符合条件的数据，实现思路如下：

实现步骤 #

1. 维护状态存储最终展示的电影列表、当前请求页码、加载状态
2. 循环请求后续页面，每次过滤出rating !== null且playProviders.length > 0的电影
3. 直到列表长度达到15条，或者没有下一页为止
4. 处理加载状态和边界情况（比如所有页面请求完仍不够15条）

React TypeScript示例代码 #

import { useState, useEffect } from 'react';

interface Rating {
  ratingAssessment: string;
}

interface Movie {
  id: string;
  title: string;
  rating: Rating | null;
  playProviders: string[];
}

interface ApiResponse {
  meta: {
    status: number;
    pagination: {
      page: number;
      perPage: number;
      hasNext: boolean;
    };
  };
  data: Movie[];
}

const MovieList = () => {
  const [movies, setMovies] = useState<Movie[]>([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);

  const fetchMovies = async (page: number) => {
    setLoading(true);
    try {
      const res = await fetch(`https://api.com/movies?orderBy=views&page=${page}`);
      const data: ApiResponse = await res.json();
      // 过滤符合条件的电影
      const validMovies = data.data.filter(movie => 
        movie.rating !== null && movie.playProviders.length > 0
      );
      // 添加到列表
      setMovies(prev => [...prev, ...validMovies]);
      // 更新分页状态
      setHasMore(data.meta.pagination.hasNext);
      setCurrentPage(page + 1);
    } catch (err) {
      console.error('请求失败:', err);
      setHasMore(false);
    } finally {
      setLoading(false);
    }
  };

  // 初始加载直到凑够15条
  useEffect(() => {
    const loadEnoughMovies = async () => {
      let page = currentPage;
      while (movies.length < 15 && hasMore && !loading) {
        await fetchMovies(page);
        page += 1;
      }
    };
    loadEnoughMovies();
  }, [movies.length, hasMore, loading]);

  // 加载更多按钮（可选）
  const handleLoadMore = () => {
    if (hasMore && !loading) {
      fetchMovies(currentPage);
    }
  };

  return (
    <div>
      <h2>电影列表</h2>
      <ul>
        {movies.map(movie => (
          <li key={movie.id}>
            <h3>{movie.title}</h3>
            <p>评分: {movie.rating?.ratingAssessment}</p>
            <p>播放平台: {movie.playProviders.join(', ')}</p>
          </li>
        ))}
      </ul>
      {loading && <p>加载中...</p>}
      {hasMore && movies.length < 15 && !loading && (
        <button onClick={handleLoadMore}>加载更多</button>
      )}
      {!hasMore && movies.length === 0 && <p>暂无符合条件的电影</p>}
    </div>
  );
};

export default MovieList;

注意事项 #

• 限制最大请求页数（比如最多5页），避免因API返回大量无效数据导致无限请求
• 添加错误处理，防止请求失败导致页面卡死
• 可添加防抖逻辑，避免重复触发请求

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