我试图建立应用程序的搜索栏,用户输入的名称。然后,它检查两个不同的API以获取有关该名称的信息,将其返回给用户,并将搜索结果保存到mongoDb。搜索表单在导航中,提交时将用户重定向到[searchName]/页面,如下所示:
type Props = {
searchParams: { [q: string]: string };
};
const SearchResults = async ({ searchParams }: Props) => {
const nationalityReq: Promise<NationalizeResponse> = getNationality(
searchParams.q,
);
const genderReq: Promise<GenderizeResponse> = getGenderData(searchParams.q);
const [nationalityData, genderData] = await Promise.all([
nationalityReq,
genderReq,
]);
const result: SearchResult = {
search: searchParams.q,
results: {
nationality: nationalityData,
gender: genderData,
},
};
await createSearchResult(result);
return (
<div className="flex-col space-y-14">
HTML with results
</div>
);
};
字符串
首先,它并行地向两个API请求信息,然后将其保存到数据库中,但是当我在搜索栏中键入并按回车键时,searchParam
发生了变化,但是每次提取都不运行,我不知道如何修复它。有什么帮助吗?
1条答案
按热度按时间q5lcpyga1#
这可能是由于组件不是在每次搜索时都重新呈现,因此不触发获取请求。简单的useEffect就可以了。
字符串