React-Query输入搜索关键词时重置页码为1，如何移除useEffect？

方案1：查询时动态指定页码（推荐） #

直接在useQuery的查询逻辑里，根据搜索关键词是否存在动态决定使用的页码——有搜索词时强制用第1页，无搜索词时沿用当前page状态值。这样当搜索关键词变化时，自动以第1页发起请求，完全不需要额外的useEffect来修改page状态。

修改后的代码：

const [input, setInput] = useState<string>('');
const filtered = useDebounce(input, 300);

// 动态计算当前请求的页码：有搜索词时用1，否则用page状态值
const currentPage = filtered ? 1 : page;

const { data: items, isFetching, isLoading, error, isSuccess } = useQuery(
  ['taxpayer', taxpayer, currentPage, filtered], // 查询键同步使用动态页码
  () => index(taxpayer, currentPage, input), // 查询函数里传入动态页码
  {
    refetchOnWindowFocus: false,
    keepPreviousData: true,
    retry: false,
    enabled: open || Boolean(filtered),
    select: (response: any) => response.data
  }
);

方案2：在输入触发点直接重置页码 #

如果希望保持page状态的同步，可以把页码重置逻辑放在输入变化的触发环节，而不是用useEffect监听。比如给输入框绑定的change事件处理函数里，更新输入值的同时直接重置页码：

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const value = e.target.value;
  setInput(value);
  // 输入非空时直接把页码重置为1
  if (value.trim()) {
    setPage(1);
  }
};

如果你的useDebounce支持回调参数，也可以在防抖后的关键词生效时再执行重置：

const filtered = useDebounce(input, 300, () => {
  if (filtered) {
    setPage(1);
  }
});

方案优势 #

• 方案1完全避免了状态同步的副作用，逻辑更内聚：搜索请求的页码直接由搜索状态决定，消除了useEffect可能带来的状态不同步风险。
• 方案2把状态修改逻辑放在触发源里，比监听式的useEffect更直观，符合"谁触发谁修改"的逻辑，更容易理解和维护。

内容的提问来源于stack exchange，提问作者Mohammad A. Souri