next.js 当搜索参数改变时重新获取数据

bq9c1y66  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(173)

我试图建立应用程序的搜索栏,用户输入的名称。然后,它检查两个不同的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发生了变化,但是每次提取都不运行,我不知道如何修复它。有什么帮助吗?

q5lcpyga

q5lcpyga1#

这可能是由于组件不是在每次搜索时都重新呈现,因此不触发获取请求。简单的useEffect就可以了。

useEffect(() => {
(//fetch data using an async function)
(// Call the function here)
,[searchParams]}

字符串

相关问题