问题标签 [swr]

我正在使用带有 SWR 的 NextJS 来获取数据。我用返回的 initialData 提供 SWR getServerSideProps。

分页工作得很好。当我转到第 3 页时，我会看到第 3 页的数据。当我转到第 5 页时，我首先再次看到第 1 页，然后再看到第 5 页数据。我认为这是在验证期间发生的。我想在第 5 页准备好之前显示第 3 页数据。我该如何解决这个问题？

我的取号器

我如何获取数据getServerSideProps

我在哪里调用 SWR 并渲染结果

我如何称呼页面和分页

我设置了以下示例 Next.js 应用程序来测试我在对 API 端点调用toISOString()中包含的变量使用 JavaScript 函数时看到的问题：useSWR

以下是调用pages/user/[id].tsx位置的代码：toISOString()

第 34 行pages/user/[id].tsx是toISOString()调用并触发多个 API 调用的位置，如浏览器控制台所示（/pages/api/user/[...params].ts第 7 行添加了控制台语句 - 请参阅下面的完整示例代码）。该toISOString()函数看起来就像是useStateNext.js 中的一个函数，因此触发了似乎不会停止的 API 调用。

关于如何使用toISOString()而不是让它触发多个 API 调用的任何想法useSWR()？

以下是完整示例应用程序的副本：

https://codesandbox.io/s/consume-next-js-api-routes-with-the-swr-library-on-the-client-side-forked-mzgwz?file=/pages/user/%5Bid% 5D.tsx

我对父/子元素之间的数据传递有疑问。父元素 StylePage 通过SWR检索数据，SWR 可以毫无问题地检索数据，并且应用程序能够使用文本显示它。问题是它没有被传递给子元素（StyleCard）。也是如此currentAssets。我在这里错过了什么可能导致道具没有被传递给 StyleCard？

编辑：有一个围绕顶层组件的全局配置SWRConfig （源） 。这就是 StylePage 中未指定 fetcher 的原因。还修复了代码示例中的错字。

我正在学习 React，因为我正在从 Pokéapi 获取数据以制作列表组件、卡片组件、详细信息组件和过滤器组件。我正在尝试制作一个过滤器，以便您可以按神奇宝贝类型进行过滤。只有还包含该类型字符串的卡片才会呈现（还没有）。所以我不确定a）我是否应该根据所选值从PokemonList中的API进行不同的调用，或者b）我是否应该比较这些值并根据比较更改PokemonCard元素在PokemonList.js中的呈现方式。我设法将数据从过滤器传递到列表组件。然后我一直在尝试将类型数据从 PokemonCard.js 传递到列表组件，以便我可以比较这两个值，但我发现很难使用回调从卡片组件传递类型数据，

我应该在这里使用哪种方法来简化过滤？有条件地进行不同的 API 调用或渲染 PokemonCard 元素？将过滤器选项与 PokemonList.js 中的口袋妖怪卡片类型进行比较是个好主意吗？那么我如何从卡片组件传递该数据，因为我没有通过点击事件传递它？

感谢您的任何想法！我从包含卡片、卡片组件和过滤器组件的列表组件粘贴代码。

PokemonList 组件：

口袋妖怪卡组件：

PokemonFilter 组件：

我试图在网上到处寻找，但我似乎找不到任何关于此的文档，这很奇怪，因为我认为这将是一种流行的需求。

例如，如果我们尝试获取具有特定 ID 的帖子：

然后也许我们有一个编辑帖子的表单，当我们进行变异时：

要强制对特定 id 进行重新验证，什么都不会发生。在这种情况下，正确的方法是什么？

顺便提一下，在没有 id 的情况下进行 SWR 获取和 /api/comments 之类的东西，其中所有评论都被获取，然后 mutate 在执行时重新验证没有问题mutate('/api/comments')

希望这是有道理的。我基本上想要实现的是，在使用一些 id 更新帖子后做一个 POST 请求，然后我想用更新的数据重新渲染页面。

当 id 值是动态的时，我得到的印象是 mutate 无法识别密钥

我的 API 中有一个端点，可以在 AWS 上启动一个进程。这个过程需要时间。根据请求的大小，它可以持续几秒钟或几分钟。截至目前，我正在重建我的应用程序以使用swr. 但是，在与我进行此新更新之前，swr我创建了一个递归函数，该函数将在超时时调用自身并不断 ping API 以请求我的 AWS 进程的状态，只有在响应具有适当类型时才退出。

我想转储那个递归函数，因为，嗯......它有点hacky。不过，我仍然很熟悉，swr而且我不是 NodeJS API 构建大师，所以我很好奇在改进下面的模式时会想到什么想法。

理想情况下，最容易实现的目标swr是以某种方式设置来处理传入的响应，如果响应不是，则继续 ping，type: "complete"但我不确定我会如何做到这一点。它几乎只是 ping 一次，然后向我显示它当时发现的任何状态。

任何帮助表示赞赏！

tldr;

swr在我的内容加载完成之前，如何设置持续 ping API？

我的 API 的一部分，它根据 AWS 流程的距离发送响应：

我目前的 useSWR钩子：

我正在尝试使用swr in实现客户端数据获取nextjs。我可以useSWR在我的桌面浏览器中显示使用钩子获取的数据。然后，我从我的桌面在本地主机上提供该应用程序，并尝试在我的移动浏览器上通过 wi-fi（两个设备在同一网络上）对其进行测试。不显示客户端获取的数据。而是<Error />返回组件。

这可能是什么原因？我还没有真正看到有人在互联网上提出类似的问题

在useSWRFetch.js

在ClientFetchedComponent.js

我有一个单元测试，其中包括渲染一个useSWR用于获取数据的组件。但是在expect()被调用之前数据还没有准备好，所以测试失败。

但是，如果我延迟setTimeout()，它将通过测试。

创建延迟或等待数据的正确方法是什么？

由于在第一次渲染时我无法获得router.query我传递的参数，getServerSideProps如下所示：

然后在函数中尝试执行 API 调用，但出现 API 停止错误

API 在未发送 /api/projects/nichole_robel23 响应的情况下解析，这可能会导致请求停止。

这是我的代码：

我有全局SWRCofig如下

有什么办法可以解决问题吗？

我在一个项目中使用 useSWR，我真的很喜欢它，但是在重新验证时遇到了问题。

我有一个 HOC 来封装表单组件，以便在运行验证之前不渲染它们，因为如果表单组件使用缓存的数据进行初始化，它不会在重新验证后重新更新，如下所示：

这个想法是，当 isValidating 变为 true 然后变为 false 时，就会发生验证。我之前用一个布尔状态变量“hasValidatedAtLeastOnce”实现了，我认为它工作得很好，但后来我注意到，即使我使用 mutate()，isValidating 在 fetcher 函数运行前一次变为真和假。那应该是什么意思？如果 fetcher 尚未运行，为什么 isValidating 会变为 false？那要验证什么？

这种行为是否足够一致，我可以安全地实现它，只需将所需的次数提高到 2 次？将 mutate 上的“shouldRevalidate”设置为 true 似乎也没有什么不同。