RTK查询:如何在变更事件中调用Redux API端点?

Question

我是React和Redux的新手，我想使用反编译器做一个GET请求，每当用户输入发生变化时，但我不允许在onChange事件中使用Redux的钩子。最好的方法是什么?

得到的eslint错误:

ESLint: React Hook "useGetPostsQuery"不能在。中调用回调。React Hooks必须在React函数组件中调用(React -hooks/rules-of-hooks)

我没有在React组件的根目录中调用它的原因是因为我需要多次调用它，而不仅仅是一次…基本上每当用户写东西时(显然要考虑到debounder)

Answer 1

如何从onChange调用端点

你可以使用"lazy"当您需要从onChange处理程序或其他函数内部调用查询API时，请使用查询钩子的版本。

每个查询端点除了标准的useQuery钩子之外还有一个useLazyQuery钩子。

在组件的顶层调用useLazyQuery钩子，这样就不会违反钩子的规则。但是调用钩子实际上并不执行API调用。调用钩子返回一个trigger函数。然后，您的事件处理程序使用正确的参数调用trigger函数来执行API调用。

const options = { pollingInterval: 1000 };
const [trigger, result, lastPromiseInfo] = api.useLazyGetPostsQuery(options);
const onChange = (e) => {
trigger(e.target.value);
}

---

如何使用onChange的顶级查询

处理此问题的另一种方法是以正常方式调用标准useQuery钩子。您可以在组件中对setState使用onChange处理程序，而不是直接从onChange调用API。然后将这些有状态变量作为参数传递给useQuery钩子。

const [text, setText] = useState('');
const options = { pollingInterval: 1000, skip: text === '' };
const result = api.useGetPostsQuery(text, options);
const onChange = (e) => {
setText(e.target.value);
}