使用useSWR实现下拉过滤时，如何动态生成sortedOptionList？

一、从API动态获取下拉选项列表 #

把硬编码的sortedOptionList改成通过API请求获取，用useSWR管理选项数据的加载、缓存和更新：

import useSWR from 'swr';
import { useState } from 'react';

// 封装获取选项的请求函数
const fetchOptions = async () => {
  const res = await fetch('/api/your-option-endpoint');
  if (!res.ok) throw new Error('选项加载失败');
  return res.json();
};

function App() {
  // 用useSWR请求选项数据
  const { data: rawOptions, error: optionsError } = useSWR(
    '/api/your-option-endpoint',
    fetchOptions
  );

  // 处理选项加载异常和未完成状态
  if (optionsError) return <div>加载选项失败，请稍后重试</div>;
  if (!rawOptions) return <div>加载选项中...</div>;

  // 对获取到的选项进行排序，替代原硬编码的sortedOptionList
  const sortedOptionList = [...rawOptions].sort((a, b) => 
    a.label.localeCompare(b.label)
  );

二、联动选项实现动态数据过滤 #

利用useSWR的key特性，当选中的选项变化时，自动触发对应过滤数据的请求：

// 维护选中的选项状态
  const [selectedFilter, setSelectedFilter] = useState<string>(
    sortedOptionList[0].value
  );

  // 封装过滤数据的请求函数
  const fetchFilteredData = async () => {
    const res = await fetch(`/api/your-data-endpoint?filter=${selectedFilter}`);
    if (!res.ok) throw new Error('数据加载失败');
    return res.json();
  };

  // 用选中的选项作为SWR的key，自动触发重新请求
  const { data: filteredData, error: dataError } = useSWR(
    `/api/your-data-endpoint?filter=${selectedFilter}`,
    fetchFilteredData
  );

三、渲染动态下拉菜单与过滤结果 #

用动态生成的选项列表渲染下拉框，同时展示过滤后的数据：

return (
    <div className="app-container">
      {/* 动态生成的下拉菜单 */}
      <select
        value={selectedFilter}
        onChange={(e) => setSelectedFilter(e.target.value)}
        className="filter-select"
      >
        {sortedOptionList.map(option => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>

      {/* 数据加载状态处理 */}
      {dataError && <div className="error-message">数据加载失败，请稍后重试</div>}
      {!filteredData && <div className="loading">加载数据中...</div>}
      
      {/* 渲染过滤后的数据 */}
      {filteredData && (
        <ul className="data-list">
          {filteredData.map(item => (
            <li key={item.id} className="data-item">
              {item.title}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default App;

关键注意事项 #

• API格式约定：确保后端返回的选项数据包含value（作为下拉选项的value）和label（作为显示文本）两个字段，若字段名不同，需在代码中做映射处理。
• SWR缓存优化：如果选项数据不频繁更新，可以通过useSWR的配置项（如revalidateOnFocus: false、refreshInterval: 0）减少不必要的重复请求。
• 默认值处理：确保动态获取的选项列表不为空时，才设置默认选中项，避免出现空值报错。
• 错误隔离：分别处理选项加载和数据加载的错误状态，让用户能明确知道是哪个环节出了问题。

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