RTK Query问题：如何在输入框change事件中调用Redux API接口？

你遇到的问题是因为React Hooks必须遵循只能在组件或自定义Hook的顶层调用的规则，所以不能在onChange回调里直接用useGetPostsQuery。正确的做法是把Hook放在组件根节点，通过控制请求参数结合防抖来实现输入触发请求的需求，具体步骤如下：

1. 用状态存储防抖后的搜索关键词 #

首先在组件里声明两个状态：一个实时保存用户的原始输入，另一个保存经过防抖处理后的搜索关键词——后者的变化会触发RTK Query的请求。

2. 实现防抖逻辑处理输入 #

通过防抖函数延迟更新搜索关键词状态，避免用户每输入一个字符就发起一次请求。可以用现成的lodash.debounce，也能自己实现轻量版防抖逻辑。

3. 在组件根节点调用RTK Query Hook #

把useGetPostsQuery放在组件顶层，将防抖后的关键词作为请求参数。RTK Query会自动监听参数变化，当参数更新时发起新请求，同时还会帮你处理缓存、重复请求合并等问题。

完整代码示例（用lodash防抖） #

import { useState, useCallback } from 'react';
import { debounce } from 'lodash';
import { useGetPostsQuery } from './api/posts';

function SearchPosts() {
  // 实时保存用户输入
  const [inputValue, setInputValue] = useState('');
  // 防抖后的关键词，用于触发请求
  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');

  // 防抖函数：延迟500ms更新搜索关键词
  const debouncedUpdateSearchTerm = useCallback(
    debounce((term) => {
      setDebouncedSearchTerm(term);
    }, 500),
    []
  );

  // 处理输入变化
  const handleInputChange = (e) => {
    const value = e.target.value;
    setInputValue(value);
    debouncedUpdateSearchTerm(value);
  };

  // 组件顶层调用Hook，用防抖后的关键词作为参数
  const { data, error, isLoading } = useGetPostsQuery(debouncedSearchTerm, {
    // 关键词为空时跳过请求
    skip: debouncedSearchTerm.length === 0,
  });

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        placeholder="搜索帖子..."
      />
      {isLoading && <p>加载中...</p>}
      {error && <p>请求出错：{error.message}</p>}
      {data && (
        <ul>
          {data.map(post => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default SearchPosts;

无lodash的轻量防抖实现 #

如果不想引入外部库，可以自己写一个防抖Hook：

import { useState, useEffect } from 'react';

const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // 组件卸载或值变化时清除定时器
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
};

// 在组件中使用
function SearchPosts() {
  const [inputValue, setInputValue] = useState('');
  // 直接用自定义Hook生成防抖后的关键词
  const debouncedSearchTerm = useDebounce(inputValue, 500);

  const { data, error, isLoading } = useGetPostsQuery(debouncedSearchTerm, {
    skip: debouncedSearchTerm.length === 0,
  });

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  // 渲染部分和之前一致...
}

关键说明 #

• Hook调用合规：useGetPostsQuery在组件顶层调用，完全符合React Hooks规则，不会触发ESLint错误。
• 防抖+RTK Query的协同：防抖减少不必要的请求，RTK Query自动处理请求缓存、重复请求合并，进一步优化性能。
• 灵活控制请求时机：通过skip选项可以在关键词为空时跳过请求，避免无效调用。

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