是否不可能在一个项目中查询多次?

Question

我正在自己制作YouTube。我从第一页获取json文件并正常获取数据，

export default function VideoHome() {
const {
isLoading,
error,
data: popular,
} = useQuery(["popular"], async () => {
return fetch("data/popular.json").then((res) => res.json());
});
if (isLoading) return <p>Loading...</p>;
if (error) return <p>{error}</p>;
return (
<div className={styles.video}>
{popular.items.map((video) => (
<VideoCard
key={video.id}
id={video.id}
thumbnails={video.snippet.thumbnails.medium}
title={video.snippet.title}
channel={video.snippet.channelTitle}
publish={video.snippet.publishedAt}
/>
))}
</div>
);
}

输入图片描述

创建一个搜索函数，我使用'useNavigate'将页面移动到搜索，我使用query，但我无法获得数据

export default function VideoSearch() {
const { search } = useParams();
const { data: bts } = useQuery(["bts"], async () => {
return fetch("data/bts.json").then((res) => res.json());
});
return (
<div>
{bts.items.map((value) => (
<SearchVideoCard title={value.snippet.title} />
))}
</div>
);
}

我以与主页相同的方式找到它，但即使我使用控制台，它也会输出undefined错误在这里输入图像描述jsondata输入图片描述

Answer 1

错误是告诉你bts.items在至少一个渲染周期上未定义，可能是初始渲染周期，直到查询获取数据并返回有效数据。

UI应该考虑到获取的数据还不可用、丢失、格式错误等。别忘了给映射的数组数据添加一个React键。

使用可选链操作符访问可能未定义的属性。

export default function VideoSearch() {
const { search } = useParams();
const { data: bts } = useQuery(["bts"], async () => {
return fetch("data/bts.json").then((res) => res.json());
});
return (
<div>
{bts?.items?.map((value) => (
<SearchVideoCard
key={value.id.videoId}
title={value.snippet.title}
/>
))}
</div>
);
}

在没有数据可以渲染的情况下，你可能更喜欢渲染一些备用UI。这与第一个代码片段类似。

export default function VideoSearch() {
const { search } = useParams();
const {
isLoading,
error,
data: bts
} = useQuery(["bts"], async () => {
return fetch("data/bts.json").then((res) => res.json());
});
if (isLoading) return <p>Loading...</p>;
if (error) return <p>{error}</p>;
if (!bts.items?.length) {
return <div>No Data</div>;
}
return (
<div>
{bts.items?.map((value) => (
<SearchVideoCard
key={value.id.videoId}
title={value.snippet.title}
/>
))}
</div>
);
}