Supabase结合useEffect实现筛选排序及动态筛选按钮问题

1. 合并筛选与排序的查询逻辑 #

把两个独立的useEffect合并成一个，让查询同时监听筛选和排序状态的变化，这样不管是切换筛选条件还是排序规则，都会触发正确的数据库查询，避免重复逻辑。

const [filterBy, setFilterBy] = useState(null); // 初始不筛选
const [orderBy, setOrderBy] = useState('created_at'); // 默认排序字段
const [smoothies, setSmoothies] = useState([]);

useEffect(() => {
  const fetchSmoothies = async () => {
    let query = supabase.from('main').select('*');
    
    // 有筛选条件时应用过滤
    if (filterBy) {
      query = query.eq('color', filterBy);
    }
    
    // 应用排序规则
    query = query.order(orderBy, { ascending: false });
    
    const { data, error } = await query;
    if (error) {
      console.error(error);
      return;
    }
    setSmoothies(data);
  };

  fetchSmoothies();
}, [filterBy, orderBy]); // 依赖两个状态，任一变化就重新查询

2. 动态生成筛选按钮 #

先从数据库获取目标列的所有唯一值，再映射成筛选按钮，不用手动写死选项：

const [uniqueColors, setUniqueColors] = useState([]);

// 组件挂载时获取唯一筛选值
useEffect(() => {
  const fetchUniqueColors = async () => {
    const { data, error } = await supabase
      .from('main')
      .select('color')
      .distinct(); // 只返回唯一值
    
    if (error) {
      console.error(error);
      return;
    }
    // 提取color字段并过滤空值
    const colors = data.map(item => item.color).filter(Boolean);
    setUniqueColors(colors);
  };

  fetchUniqueColors();
}, []);

然后在JSX里动态渲染按钮：

<div className='order-by'>
  <p>Filter By:</p>
  <p>
    {/* 新增"全部"选项，取消筛选 */}
    <button onClick={() => setFilterBy(null)}>全部</button>
    {/* 循环生成筛选按钮 */}
    {uniqueColors.map(color => (
      <button 
        key={color} 
        onClick={() => setFilterBy(color)}
        {/* 给当前选中的按钮加高亮样式 */}
        style={{ backgroundColor: filterBy === color ? '#e0e0e0' : 'transparent' }}
      >
        {color}
      </button>
    ))}
    <span>当前筛选: {filterBy || '全部'}</span>
  </p>
</div>

3. 关于数据库调用与本地解析的疑问 #

• 是否需要多次调用数据库？
  优先让Supabase后端处理筛选和排序，而不是把全量数据拉到前端再处理。数据库端的PostgreSQL对查询优化更专业，尤其是数据量大时，能减少前端加载的数据体积，避免不必要的资源浪费。如果数据量极小（几十条以内），本地处理也没问题，但数据库端处理更规范。

• 本地解析数据是否影响加载速度？
  数据量小的时候影响可以忽略，但数据量大时，本地筛选排序会增加浏览器的计算负担，导致页面卡顿，而且初始加载全量数据的时间会更长。所以尽量让数据库返回已经筛选排序好的结果，前端只负责渲染。

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