有可能使用多个查询使用RTK在同一个组件查询吗?

Question

所以这个项目是从restcountries API获取数据。在索引页面上，初始值是获取所有国家的数据并将其显示为卡片。获取所有国家数据的端点是https://restcountries.com/v3.1/all。在索引页，还有两个过滤器，第一个是按fullName搜索国家，端点是https://restcountries.com/v3.1/name/{name}?fullText=true，然后按地区，端点是https://restcountries.com/v3.1/region/{region}我想我已经成功地实现了这个用useEffect来获取数据，这是代码这是现场演示

// Let's pretend there is an import here
export const ListOfCountries = ({ cca3 }) => {
const [data, setData] = useState(null);
const [apiUrl, setApiUrl] = useState("https://restcountries.com/v3.1/all");
const [searchQuery, setSearchQuery] = useState("");
const [errorMessage, setErrorMessage] = useState("");
const [optionUrl, setOptionUrl] = useState("");
useEffect(() => {
(async () => {
try {
const response = await axios.get(apiUrl);
setErrorMessage("");
setData(response.data);
if (searchQuery === "") {
optionUrl
? setApiUrl(optionUrl)
: setApiUrl("https://restcountries.com/v3.1/all");
} else {
setApiUrl(
`https://restcountries.com/v3.1/name/${encodeURI(
searchQuery
)}?fullText=true`
);
}
} catch (error) {
setErrorMessage(
`${searchQuery} is not found, plesase enter full name of country`
);
if (searchQuery === "") setApiUrl("https://restcountries.com/v3.1/all");
}
})();
}, [apiUrl, searchQuery, optionUrl]);
return (
<>
<Flex>
<Input
type="search"
placeholder="Search for a country..."
onChange={useDebounce((e) => setSearchQuery(e.target.value), 700)}
/>
<FilterBox setApiUrl={setApiUrl} setOptionUrl={setOptionUrl} />
</Flex>
<Flex>
{errorMessage ? (
<p>{errorMessage}</p>
) : (
data?.map((item, index) => {
return (
<Link to={`/country/${item.cca3}`} key={index}>
<PreviewCard item={item} />
</Link>
);
})
)}
</Flex>
</>
);
};

现在我正试图使用RTK查询实现相同的功能，所以我创建了2个查询国家。js并在listofnations .jsx中使用它们。获得所有国家数据按预期工作,但当我试图使用useGetCountryByFullNameQuery数据没有显示,仍然呈现所有国家的数据。我把它打印到控制台，实际显示的是某个特定国家的数据。如何像上面使用useEffect那样显示它们?

Answer 1

在显示链接的Flex组件中，您总是从useGetallCountriesQuery映射到data。当searchQuery不为空且searchData不为undefined时，使用searchData，否则使用data进行映射。