我如何使用React查询实现这个API端点的搜索目的?

Question

const { isLoading, isError, data, error, refetch } = useQuery(
"university",
async () => {
const { data } = await axios(
"http://universities.hipolabs.com/search?name=middle"
);
console.log("THis is data", data);
return data;

}
);

这是搜索框,我想大学名称的地图数据输入

<Typeahead
id="basic-example"
onChange={setSelected}
options={university}
placeholder="Choose a School..."
selected={selected}
/>

Answer 1

这个问题已经被问了很多次了，所以我把它添加到我的反应查询常见问题解答中:https://tkdodo.eu/blog/react-query-fa-qs#how-can-i-pass-parameters-to-refetch

searchValue需要成为queryKey:

的一部分

const { isLoading, isError, data, error, refetch } = useQuery(
["university", searchValue],
async () => {
const { data } = await axios(
`http://universities.hipolabs.com/search?name=${searchValue}`
);
console.log("THis is data", data);
return data;

},
);

则，一旦用户选择了新的searchValue，查询将自动重新获取。如果每次按键都改变searchValue，使用useDebounce之类的东西来延迟查询:

const [searchValue, setSearchValue] = useState('') // value from search input
const name = useDebounce(searchValue, 500)
const { isLoading, isError, data, error, refetch } = useQuery(
["university", name],
async () => {
const { data } = await axios(
`http://universities.hipolabs.com/search?name=${name}`
);
console.log("THis is data", data);
return data;
},
);

---

Answer 2

我想你可以这样写:

const [searchValue, setSearchValue] = useState('') // value from search input

const { isLoading, isError, data, error, refetch } = useQuery(
["university", searchValue],
async () => {
const { data } = await axios(
`http://universities.hipolabs.com/search?name=${searchValue}`
);
console.log("THis is data", data);
return data;

},
false // you can disable automatic run (when empty)
);
useEffect(() => {
refetch() // wrap with debounce function to not call on every change
}, [searchValue])