问题标签 [swr]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
918 浏览

reactjs - 使用 SWR 条件获取和 react-boostrap Accordion

尝试将 youtube 评论加载到无限加载组件中(使用 npm)

由于无限加载组件是父 Accordion 组件的子组件(来自react-bootstrap),因此发生混乱,而我想要实现的是仅在 Accordion 被点击(打开)时才使用 useSWR 获取。

我尝试的是使用 useSWR 条件,以便仅在状态“show”为真时获取,这是在函数内部设置的:

在 Accordion.Toggle onClick 事件上调用。

但是,我只能在单击 Accordion 两次后才能显示评论,这是为什么呢?

我的代码是:

编辑:如下所示,我重新激活了useEffect,但它仍然需要两次点击Accordion

0 投票
1 回答
618 浏览

javascript - 当我的响应需要在下一次相关 API 调用之前执行一些逻辑操作时,我如何使用 useSWR 挂钩

swr在 CRA 应用程序中使用,需要使用useSWR挂钩来获取依赖和条件的数据。我需要做的是:

  1. 调用一个 api 来获取id我将用于第二个 api 调用的一个 api。位于idupcomingEventspassedEvents
  2. 我想从中获取它,upcomingEvents但如果该数组为空,我想从中获取它passedEvents
  3. 我知道我想要任何一个数组中的第一个 id,所以使用任何一个数组的第一个索引都可以(例如:)upcomingEvents[0].id
  4. 以下是第一个 api 调用的代码和响应示例:

我想获取下一个呼叫的 id 的第一个呼叫的响应可能如下所示:

如果我对第二个 api 调用进行硬编码以使用upcomingEvents[0].id(如上面的代码示例),我会得到我想要的响应。

我挣扎的是在哪里放置决定在依赖的第二个api调用中使用哪个id的逻辑?我想要这个逻辑,但如果不违反钩子规则,我无法弄清楚在哪里

0 投票
0 回答
713 浏览

reactjs - After infinite loading using useSWRInfinite, the css is not working for some elements

I want to make infinite loading using useSWRInfinite.

This is code that get movie api from tmdb using useSWRInfinite. after click load more button, useSWRInfinite get data successful.

When first render, card component works well. but after click load more, the component Card is not working and for each item. All data works well with show image and show title, but the image size is not fit and the animation of card is not working.

this is the hooks using useSWRInfinite

useRequest.ts

0 投票
1 回答
1366 浏览

reactjs - 使用 Typescript 的 SWR Vercel 全局配置

我想用 SWR Configs 创建一个对象来将它们设置为全局。我正在使用来自 swr 的 ConfigInterface 类型。

问题是当我尝试在 SWRConfig 中使用这个对象时

显示下一个错误

我的提取器功能

0 投票
0 回答
452 浏览

reactjs - 如何改变多个 SWR 键

我正在使用 SWR 显示分页组件,与docs 中的示例非常相似。我的钥匙看起来像

我想上传一个新的项目列表,我想告诉 SWR 重新验证所有项目请求,因为它们将不再有效。我假设mutate仍然是执行此操作的正确途径,但是有没有一种方法可以告诉 mutate 一次使许多键无效?或者更好,所有匹配的键/api/items(.*)

谢谢!

0 投票
3 回答
4322 浏览

reactjs - NextJS:在子组件中获取数据并传递给父组件

我是 Next.js 的新手,正在尝试制作一个电子商务项目。如果子组件Sort Component 向服务器发送 post 请求以过滤数据并将其作为产品 props传递回Products组件,我会被卡住。

文件夹结构是这样的:

Sort组件中,我会将过滤器参数发送回服务器。所以我想到的方法是使用redux,但是可以使用useSWRhook吗?由于该操作是在Sort组件中执行的,因此似乎useSWRhook 需要将操作和数据一起返回到同一个组件中,对吗?

0 投票
1 回答
1597 浏览

javascript - 在 SWR 获取请求中使用 Next.js 动态路由查询对象

使用 Next.js 动态路由时,我尝试使用路由查询对象发出 SWR 获取请求,但在设置查询对象之前调用了我的 SWR 获取请求。

给定动态路由/posts/[id],考虑页面/posts/123

此 URL 最初控制台记录为https://my.api.com/posts/undefined,并且从 API 返回错误,因为https://my.api.com/posts/undefined它当然不是有效路径。

紧接着,URL 控制台会正确记录为https://my.api.com/posts/123,然后页面上的数据通常会填充,但有时数据不会填充并且卡在“加载”状态。当我对 URL 进行硬编码时,这永远不会发生。

我在这里做错了吗?为什么查询对象不能立即可用?有没有办法优雅地等待它被设置?

0 投票
1 回答
845 浏览

javascript - SWR 不返回任何数据

我正试图让 SWR 工作。当我将它应用于我的代码时,我发现的每个示例似乎都不起作用。我不确定我做错了什么代码似乎是相同的,我确定我看不到的超级简单的东西。

我有一个样板 next.js 应用程序。

index.js有;

当我启动开发服务器时,它告诉我 http://localhost:3000 是可以查看开发服务器的位置。当我在返回线上调试和暂停时,它告诉我data并且error未定义。当我去时,http://localhost:3000/api/我得到了格式良好的 json(firefox 将其呈现为 json)。

0 投票
1 回答
762 浏览

next.js - 即使密钥缓存在 Next.js 中,也会导致 useSWR 在页面装载时重新获取

所以我使用 useSWR 钩子从我的 api 端点获取数据。我知道它使用 api 路由作为缓存数据的关键。

问题是,我在 2 个页面上使用 api 路由(我们称它们为 Page1 和 Page2),只是使用不同的查询。因此,每当我首先访问 Page1 时,如果我随后导航到第 2 页,它就会显示第 1 页的缓存版本,反之亦然。

我尝试在两个页面上使用 mutate 函数,它所做的只是在重新验证之前首先显示缓存的版本。这并不理想。我想要的是在页面装载上,应该显示正确的数据。

我还尝试在 _app.js 的 SWRConfig 选项中将 revalidateOnMount 标志设置为 true,如下所示:

不工作。

我应该提一下,我确实在两个页面上都有来自 getStaticProps 函数的 initialData。

将不胜感激任何帮助。被困在这个问题上已经有一段时间了。

0 投票
2 回答
2121 浏览

reactjs - 是否可以使用 useSWR 在 nextJS 中发送页面 ID,以便我可以根据我所在页面的 ID 获取数据

我在下一个 js 中使用 useSWR 发出请求,api 路由需要我所在页面的 id,它在查询参数中router.query.id但我如何将它传递给 useSWR,以便我可以从我的 api 中提取正确的数据与我的数据库对话的路由器功能。

这是简单的请求

更新:如果我尝试按照文档传递数组,则 api 函数中的请求体是未定义的。这是我自阅读以来所尝试的。

api路由

更新:我尝试了以下提取器,但仍然不知道它在做什么,所以它不起作用。