React Query确实可以通过处理数据获取、缓存和状态管理来简化这一过程,特别是在处理诸如获取帖子和歌曲这样的多个异步请求时特别有用。
使用React Query,您可以管理多个查询,并为每个查询独立显示加载状态。以下是使用React Query如何组织此类结构的一个示例:
import { useQuery } from 'react-query';
const Home = () => {
const {
data: posts,
isLoading: isLoadingPosts,
isError: isErrorPosts,
} = useQuery('posts', fetchPosts);
const {
data: songs,
isLoading: isLoadingSongs,
isError: isErrorSongs,
} = useQuery('songs', fetchSongs);
if (isErrorPosts || isErrorSongs) {
// 处理错误状态
return <div>Error fetching data</div>;
}
return (
<div>
{isLoadingPosts ? (
<Spinner />
) : (
<div>
{posts && posts.map((post) => (
// 显示帖子
<div key={post.id}>{/* 帖子内容 */}</div>
))}
</div>
)}
{isLoadingSongs ? (
<Spinner />
) : (
<div>
{songs && songs.map((song) => (
// 显示歌曲
<div key={song.id}>{/* 歌曲内容 */}</div>
))}
</div>
)}
</div>
);
};
// 示例获取函数(请替换为实际的API调用)
const fetchPosts = async () => {
const response = await fetch('API_ENDPOINT_FOR_POSTS');
if (!response.ok) {
throw new Error('Error fetching posts');
}
return response.json();
};
const fetchSongs = async () => {
const response = await fetch('API_ENDPOINT_FOR_SONGS');
if (!response.ok) {
throw new Error('Error fetching songs');
}
return response.json();
};
export default Home;
这种方法允许React Query管理从API端点获取的数据的加载状态、错误处理和缓存。您定义用于检索数据的获取函数(fetchPosts和fetchSongs),而React Query负责其余工作,极大地简化了组件逻辑。