NextJS 使用 Debounce 搜索查询 URL答案

【问题标题】：NextJS Search Query URL with DebounceNextJS 使用 Debounce 搜索查询 URL
【发布时间】：2022-11-11 02:36:04
【问题描述】：

我想用 Debounce 实现一个即时搜索字段。因此，当我停止输入（500 毫秒后）时，开始搜索，搜索查询现在也在 de url-param 中。我的问题是，我需要同步 url 查询和输入字段，所以当我停止输入时，搜索查询进入 url 查询。但是对于例如当我切换页面并返回时（因此搜索现在在 url-query 中，但输入字段为空）我需要 url-query 进入输入字段。

API 请求带有 GraphQL 搜索变量。

编辑： This is a Git-Gist for the existigin Code

【问题讨论】：

标签： url next.js state debouncing react-instantsearch

【解决方案1】：

您可以使用浅层路由

当您更新输入字段时，您也会更新 URL

router.push('/?search=yourQuery', undefined, { shallow: true })

将“shallow”设置为 true，将在不重新加载页面的情况下更新 URL。

您可以在此处查看有关 Shallow 的更多信息：https://nextjs.org/docs/routing/shallow-routing

并且要在您返回时解决您的问题，您可以尝试使用使用效果如果 URL 有一些查询，则不依赖于更新您的输入。

【讨论】：

我的问题是，对于案例，我有一个 useEffect，即输入状态发生了变化。这个 useEffect 推送路由。但是当我现在拥有一个 useEffect 时，它在 Route 更改时运行，Search State 推送时，我有一个无限循环。 PS：在我编辑的问题中是代码

【解决方案2】：

为我解决的问题是 onChange 事件处理程序中的await router.push

【讨论】：