React项目使用Axios实现游戏API排序筛选功能的方法

完全不需要为每种筛选排序组合单独编写请求函数，你只需要把筛选、排序参数做成可动态更新的React状态，请求时自动拼接参数即可，具体实现如下：

实现逻辑 #

• 新增查询参数状态，用来存储用户选择的平台、分类、排序规则
• 改造原有请求函数，支持动态拼接params参数和调整请求路径
• 新增筛选/排序操作UI，用户修改选项时自动触发新的请求

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

const App = () => {
  const [games, setGames] = useState([]);
  // 新增查询参数状态，初始值可根据默认展示需求设置
  const [queryParams, setQueryParams] = useState({
    platform: '',
    category: '',
    'sort-by': 'popularity' // 默认按热度排序
  });
  // 固定公共请求头
  const COMMON_HEADERS = {
    'x-host': 'example.com',
    'x-key': 'xxx'
  };

  const getGames = () => {
    // 动态生成请求配置
    const hasFilter = Object.values(queryParams).some(val => val.trim() !== '');
    const requestOptions = {
      method: 'GET',
      // 有筛选参数时用带filters的路径，否则用原路径
      url: hasFilter ? 'https://example.com/api/games/filters' : 'https://example.com/api/games',
      // 把空值过滤掉再传给params，避免给接口传无效参数
      params: Object.fromEntries(Object.entries(queryParams).filter(([k, v]) => v.trim() !== '')),
      headers: COMMON_HEADERS
    };

    axios.request(requestOptions)
      .then((response) => {
        setGames(response.data);
      })
      .catch((error) => {
        console.error(error);
      });
  };

  // 当查询参数变化时自动重新请求数据
  useEffect(()=>{
    getGames();
  },[queryParams])

  // 修改参数的通用方法，不用为每个筛选条件单独写修改函数
  const handleParamChange = (key, value) => {
    setQueryParams(prev => ({
      ...prev,
      [key]: value
    }));
  };

  return (
    <div className="container">
      {/* 筛选排序操作区 */}
      <div className="filter-bar">
        {/* 平台筛选 */}
        <select 
          value={queryParams.platform} 
          onChange={(e) => handleParamChange('platform', e.target.value)}
        >
          <option value="">全部平台</option>
          <option value="browser">浏览器端</option>
          <option value="pc">PC端</option>
          <option value="mobile">移动端</option>
        </select>

        {/* 分类筛选 */}
        <select 
          value={queryParams.category} 
          onChange={(e) => handleParamChange('category', e.target.value)}
        >
          <option value="">全部分类</option>
          <option value="mmorpg">MMORPG</option>
          <option value="shooter">射击</option>
          <option value="strategy">策略</option>
        </select>

        {/* 排序选择 */}
        <select 
          value={queryParams['sort-by']} 
          onChange={(e) => handleParamChange('sort-by', e.target.value)}
        >
          <option value="popularity">按热度排序</option>
          <option value="release-date">按发布时间排序</option>
          <option value="alphabetical">按名称排序</option>
        </select>
      </div>

      {/* 游戏列表展示 */}
      <div className="game-list">
        {
          games.map((game)=>{
            const {id, title, platform, publisher, thumbnail} = game;
            return (
              <div key={id} className="item">
                <img src={thumbnail} alt={title}/>
                <h1>{title}</h1>
                <h2>{platform}</h2>
                <h3>{publisher}</h3>
              </div>
            )
          })
        } 
      </div>
    </div>
  )
}

export default App;

代码说明 #

• 所有筛选排序参数都存在queryParams状态里，后续要新增筛选维度只需要在状态里加对应的字段，在操作区加对应的选择器即可，不需要修改请求逻辑
• 请求时会自动过滤掉空值参数，不会给接口传递无效的筛选条件
• 把请求头抽成公共常量，避免重复编写相同代码
• 通用的handleParamChange方法可以处理所有参数的修改，不需要为每个筛选条件单独写事件处理函数

内容的提问来源于stack exchange，提问作者Amadeo de la Peña