我正在使用 Redux-Toolkit 查询,并且在调用 GET API 时传递参数。如果我想重新获取并更改查询参数以传递,我该怎么做?目前我在文档中看到您只能调用 refetch 方法,但它不接受参数。
const { data, refetch } = useGetPokemonQuery({ pageNo: 1, search: "Pikachu" });
// Click next page:
refetch() // How can i pass next page no
返回的
refetch
函数仅重新获取,即重新触发查询,使用与上次调用查询相同的当前参数。您将需要更新传递给查询的 pageno
参数,这将触发查询端点。
基本示例:
const [pageNo, setPageNo] = React.useState(1);
...
const { data } = useGetPokemonQuery({ pageNo, search:"Pikachu" });
...
const nextPage = () => setPageNo(page => page + 1);
...
<button type="button" onClick={nextPage}>Next Page</button>
另一种方法是使用惰性查询挂钩,它返回您将参数传递给的触发器函数。
示例:
const pageNoRef = React.useRef(1);
...
const [trigger, { data }] = useLazyGetPokemonQuery();
React.useEffect(() => {
// Initial request when component mounts
trigger({ pageNo: pageNo.current, search:"Pikachu" });
}, []);
...
const nextPage = () => {
pageNoRef.current++;
trigger({ pageNo: pageNo.current, search:"Pikachu" });
};
...
<button type="button" onClick={nextPage}>Next Page</button>