如何使用react-Query从不同的url重新获取?

Question

我使用react查询和fetch从字典API获取数据，我想添加一个功能，我可以改变我从API拉的值我添加了一个点击功能来改变状态，这是URL的一部分，当它触发渲染时，它应该给我一个URL中单词的新定义。但它的行为相当缓慢，有时需要多次点击才能使其工作，这是奇怪的，我认为它必须与获取数据的速度有关，但这不能是这种情况，因为它立即返回控制台。

这是我的页面:

import React from "react";
import { useQuery } from "react-query";
import { useState } from "react";
import { Button } from "@chakra-ui/react";
const Word = () => {
const [word, setword] = useState("run");
const handleWordchange = () => {
if (word === "run") {
setword("stop");
} else {
setword("run");
}
console.log(word);
};
const fetchWord = async () => {
const res = await fetch(
`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
);
return res.json();
};
const { data, status, isLoading, isFetching } = useQuery(
"definition",
fetchWord
);
const getDefinition = () => {
if (isLoading || isFetching) {
return <h2>is loading</h2>;
} else {
let definiton = data[0]["meanings"][0]["definitions"][0]["definition"];
console.log(data);
return definiton;
}
};
return (
<>
{getDefinition()}
<Button onClick={handleWordchange}>click</Button>
</>
);
};
export default Word;

你可以看到很简单我想做的就是让停止的定义出现在屏幕上。在控制台上，它返回对象

Answer 1

从文档…

如果您的查询函数依赖于变量，则将其包含在查询键

中由于查询键唯一地描述了它们正在获取的数据，因此它们应该包含任何您在查询函数中使用的变量

首先，我将fetchWord移出组件并将其更改为接受word参数。这意味着它不会在每次组件重新渲染时被重新定义，也使测试更容易。

const baseUrl = "https://api.dictionaryapi.dev/api/v2/entries/en/";
const fetchWord = async (word) => {
const url = new URL(encodeURIComponent(word), baseUrl);
const res = await fetch(url);
if (!res.ok) {
throw new Error(`${res.status}: ${await res.text()}`);
}
return res.json();
};

然后在您的组件中，将word添加到查询键并将其传递给fetchWord函数

const [word, setword] = useState("run");
const { data, status, isLoading, isFetching } = useQuery(
["definition", word],
() => fetchWord(word)
);