问题标签 [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 投票
1 回答
2153 浏览

reactjs - 尝试使用 SWR (Next.js) 获取 API 时出错

我从 SWR 示例页面成功运行了以下代码:

但是,当我使用我的自定义 API 并更新要呈现的属性 ( {data.id}, {data.title}...) 时,我得到“发生错误”。

如果我删除条件返回,我会得到“数据未定义”:

未处理的运行时错误类型错误:数据未定义

我在项目的其他部分使用了我的 API,没有遇到任何问题。

0 投票
0 回答
1035 浏览

javascript - 卸载组件时,useSWR() 和 mutate() 的行为不符合预期

我遇到了一些关于 mutate(key) 的意外行为的问题。在我的数据获取代码中,我有这些钩子/函数:

我还有一个使用 useRecent() 获取数据的组件:

我目前在两个地方使用这种模式,一个是组件在setRecent()发生时安装的地方。另一个是卸载组件的位置。安装组件后,一切正常。当mutate()被调用时,一切似乎都重新获取并重新渲染。

但是,如果在卸载组件时调用 setRecent(),然后我返回它,我会得到陈旧的数据,并且不会重新获取。

我想我一定是误解了什么mutate(key),或者我不清楚它是什么dedupingInterval。我认为,即使重复数据删除间隔很高,变异也会导致 GetRecentFoundations 缓存无效,因此下一次调用useSWR()将需要重新验证。

0 投票
0 回答
254 浏览

reactjs - 使用 SWR Hook 获取带有输入参数的数据

取器

我试图显示一个卡片列表,其中包含在选择一个国家提交到端点后出现的值。我怎样才能改进这一点并使其真正发挥作用?

0 投票
1 回答
2749 浏览

reactjs - 我应该在这个包装 useSWR 的自定义钩子中测试什么?

我创建了一个名为 useCity 的自定义钩子。它包装了使用 useSWR 进行的 API 调用。

这是钩子的代码:

现在,我需要测试钩子。所以,我尝试使用mswand @testing-library/react-hooks

这是我的尝试:

我认为一旦我实现了模拟功能,测试用例就会通过。

但我不知道这是否是测试这种钩子的正确方法。我是前端开发人员,这是我测试 API 调用的责任吗?

我是编写涉及 API 调用的测试用例的新手。我是否朝着正确的方向前进?我不知道这种测试叫什么。如果有人能告诉我我正在执行的测试类型,那么它将帮助我在谷歌上搜索解决方案,而不是浪费其他开发人员的时间来回答我的问题。

0 投票
1 回答
1855 浏览

reactjs - 如何使用给定的初始值进行 useSWR 突变?

问题是,如果我删除初始值,那么一切正常。我认为具有初始值的数据不会被缓存。但我不知道如何解决这个问题。如果初始数据变异返回未定义。

在页面组件中:

我的突变:

0 投票
1 回答
68 浏览

reactjs - 错误:无效的挂钩调用。在等待之后调用钩子时 - 你如何等待来自一个钩子的数据实例化到另一个钩子?

我试图在使用 swr 获取数据之前将标头注入到我的 fetcher 中。我需要等待自定义钩子响应数据,然后才能将其注入自定义提取器。

如果我使用 promise.then 我知道我正在获取相关数据,并且如果我使用字符串手动注入它,它会起作用并且我会看到标题。它只是异步进行

我该怎么做呢?

代码:

0 投票
0 回答
269 浏览

reactjs - useSWR 在需要数组时如何发出对象?

我有 useSWR 并且我将带有 SSR 的数据作为初始值放入其中并获得一个数组。如果我从 SSR 制作聊天控制台日志,那么它们会定期显示正常信息。

问题是 useSWR 有时会奇迹般地向我返回一个 OBJECT ,甚至在第二个控制台日志期间变成一个空数组。这怎么可能?

而最令人惊讶的是,在其他只有1个useSWR请求的页面上也有类似的方案(如果有必要,我可以用截图或代码来证明,那里是一样的)。但是在 THIS 发生的页面上,这些请求 3. 我已经困惑了很长时间,我认为这很神奇。我倾向于认为应该归咎于支持者,但他否认了这一点。

从 SSR 获取聊天记录:

全局 useSWR 配置:

0 投票
1 回答
971 浏览

reactjs - 如何将 SWR 添加到异步操作

我希望在下面提供一些指导/反馈。每当我开发一个 React 应用程序时,我都喜欢坚持类似模式的模式,我不介意样板文件,因为我相信它为我提供了一种非常结构化的方法来开发我的应用程序。这只是个人喜好,但我开始注意到在获取数据部门添加一些新功能时的一些缺点。所以通常这就是我的典型应用程序的样子。

带有api.js返回 axios 实例的 API 类的文件。

我的constants.js

我的messageActions.js

最后但并非最不重要的是,我的messageReducer.js

我想要实现的是在这个消息异步调用上实现 SWR。我遇到的问题是 SWR 是一个钩子,正如我们在上面看到的那样,我们正在使用纯函数。有没有人遇到过在上述结构的应用程序上实现 SWR 的方法?

到目前为止我尝试的是创建一个自定义 SWR 钩子,当直接在组件上使用时就像一个魅力,我想做的是将它添加到我的操作中,因为其他一些调用将需要广泛的副作用与他们合作我上面展示的内容是为了说明目的。

我创建的钩子看起来像这样useSWRList.js

我怎么能把它添加到我的 messageActions 中?

这里有没有人尝试过这样做,如果有,请给我一些反馈。任何事情都将不胜感激。您会建议在这种设置中实现类似 SWR 的行为吗?

0 投票
1 回答
2882 浏览

reactjs - swr vs axios 与 setInterval 用于大型 json 数据和 React 中的高频率

我正在尝试使用大型 json 数据构建一个应用程序,并每 7 秒发送一次获取请求。因此,数据大小和频率都很高。我应该使用swror axios with react hooks and setinterval。我正在使用 ag-grid 和 react-vis 图表来显示数据。

每页有12个表格,30-100行。我担心性能问题。

我是新来的反应。我需要一些决定图书馆的建议。

0 投票
1 回答
3303 浏览

promise - 如何使用 SWR nextjs 钩子在一页中进行多次调用?

我想为一页获取 3 个端点,我正在使用 next.js 中的 SWR 挂钩,因为我需要从客户端获取它。该文档对我没有帮助,因为我在其他文件中有 url 的变量。我是新手。这是我所拥有的,并且仅在一个端点上运行良好:

数据.ts

这就是我所说的:

索引.tsx