搜索栏和过滤器同时触发时如何避免重复请求？

这个问题的核心在于两个防抖状态是独立的，导致它们的变化会分别触发请求。我们需要将这两个状态的变化合并到同一个防抖逻辑中，这样无论用户修改搜索词还是分类，都会重置同一个计时器，最终只触发一次请求。

第一步：合并状态变化
我们可以把搜索词和分类的状态组合成一个对象，然后对这个对象进行防抖处理。这样，只要任意一个字段发生变化，都会触发同一个防抖逻辑。

import { useState, useEffect } from 'react';

import { useDebounce } from 'use-debounce';



function useCombinedDebounce(searchInput, filterValue, delay) {

  // 创建一个组合状态，包含搜索词和分类

  const combinedState = { query: searchInput, category: filterValue };



  // 对这个组合状态进行防抖处理

  const [debouncedState] = useDebounce(combinedState, delay);



  return debouncedState;

}

这里我们用了一个对象 combinedState 来存储搜索词和分类的状态，然后对这个对象进行防抖。这样可以确保无论哪个字段发生变化，都会触发同一个防抖逻辑。

第二步：监听防抖后的状态
接下来，我们在组件中使用这个合并的防抖状态，并在它的变化时触发请求。

function ProductPage() {

  const [searchInput, setSearchInput] = useState('');

  const [filterValue, setFilterValue] = useState('');



  // 使用合并的防抖逻辑

  const debouncedState = useCombinedDebounce(searchInput, filterValue, 500);



  useEffect(() => {

    // 当防抖后的状态变化时，发起请求

    fetchData(debouncedState);

  }, [debouncedState]);



  return (

    <div>

      <input 

        type="text" 

        value={searchInput} 

        onChange={(e) => setSearchInput(e.target.value)} 

        placeholder="搜索商品" 

      />

      <select 

        value={filterValue} 

        onChange={(e) => setFilterValue(e.target.value)}

      >

        <option value="">全部分类</option>

        <option value="electronics">电子产品</option>

        <option value="clothing">服装</option>

      </select>

    </div>

  );

}



// 模拟的请求函数

function fetchData({ query, category }) {

  console.log(发起请求：搜索词=${query}, 分类=${category});

}

在这个实现中，debouncedState 是一个防抖后的对象，包含 query 和 category 两个字段。当用户修改搜索框或下拉框时，debouncedState 会在 500 毫秒后更新，触发 useEffect 中的请求逻辑。

第三步：为什么这样做有效
1. 统一防抖逻辑：通过将搜索词和分类的状态合并为一个对象，我们避免了两个独立防抖状态分别触发请求的问题。
2. 重置计时器：无论用户修改哪个输入框，都会更新 combinedState，从而重置防抖计时器。只有在用户停止操作一段时间后，才会真正触发请求。
3. 减少不必要的请求：这种方式可以显著减少短时间内多次请求的情况，提升页面性能。

注意事项
- 如果你的项目中没有现成的 useDebounce 钩子，可以用 lodash.debounce 或者手写一个简单的防抖函数。
- 如果需要支持更复杂的过滤条件（比如多选、价格区间等），也可以扩展 combinedState 的结构，原理是一样的。

这种做法在实际开发中很常见，尤其是涉及到多个联动输入的场景。希望这个方案能解决你的问题！