问题标签 [react-query]

由于各种原因，我在我的状态中存储了一个函数（它与react-query库一起使用）。不过，当我尝试更新它时，我看到了非常奇怪的行为。当任何doSearch,doNext或doPrev被调用时，它会成功更新状态 -useEffect钩子正在正确触发，我可以在控制台中看到消息 - 但它不会触发重新渲染，直到窗口失去并重新获得焦点。

我见过的大多数其他人都在以他们的状态存储一个数组，并更新数组而不是创建一个新的数组——所以钩子不会把它当作一个新对象，并且重新渲染不会发生。不过，我没有使用数组，我使用的是一个函数，并将不同的函数对象传递给它。我完全被难住了，不知道发生了什么。

编辑：似乎它可能不是渲染失败，但查询钩子没有注意到它的输入已经改变？我已经编辑了上面的代码以显示整个函数，下面是我的自定义钩子。

我正在使用 React Query 并尝试从 JSON 文件内联获取数据（用户）。

我已经用npm React-query& React-query-devtools 安装了它，并且只有 2 个文件。

App.js：

Users.js：

我无法解决此错误：

在上面的示例中，我们需要fetchData()参数 compId 等于231，并且 tmId 等于1053039。根据我对 react-query 的理解，我认为我会得到这个。然而，我们得到了这个：

...在 key.queryKey 可以访问 queryKey 数组，但是参数compId和tmId未定义，即使我们这样使用 useQuery()：useQuery(['string-key', 231, 1053039], fetchData)...

我们在这里缺少什么吗？我们怎样才能让这些值作为回调fetchData函数的参数呢？

React-Query 通常会返回一些查询状态，例如isLoading, isError。该库保证这些布尔值是稳定的。onSuccess这意味着如果例如检查布尔值，我们可以确定数据存在。然而，这 - 当然 - 对于 TS 编译器来说是不够的。即使在检查之后，它也假定数据可以是undefined. 让 TS 编译器知道数据存在的最佳方法是什么？

这是文档中的一个示例：

在我使用 React Query 的 React 项目中，我有一个功能组件MoveKeywordModal，例如：

1. 当它第一次加载时，它会从 API 端点api/keyword_lists获取一堆keywordLists数据。对于其中的每一个keywordLists，调用它list，我创建一个可点击的元素。

2. 当可点击元素（包含在 a 中HoverWrapper）被点击时，我想发送一个api/keyword_lists/:list_id/keyword_list_items/import带有一些数据的 POST API 请求。:list_id刚刚单击的列表的 id 在哪里。

尽管调用setNewKeywordList(list)了onClickof HoverWrapper，但似乎newKeywordList.id仍然没有定义，甚至newKeywordList没有定义。

我应该怎么做才能修复它？

谢谢！

目标

我正在构建一个 NextJS 应用程序，它使用 react-query 来获取数据。

我现在正在尝试实现一个测试框架。但是，当我运行时，yarn test我收到以下错误。从 react-query 文档中，我了解到错误通常与<QueryClientProvider>未包含在_app.js.

我怀疑我需要为 react-query 引入一些“模拟数据”，index.test.js但无法找到有关如何执行此操作的文档。

错误

代码

/测试/index.test.js

/pages/index.js

/pages/_app.js

This is the first time to use React Query with Next.

My problem is this, I am trying to make a query with useQuery, but the result of my "data", which I called "response" is undefined.

I don't understand why I'm making an error, because the code I have is basically what I have done so far.

My app.js code:

My threads.js code:

I hope you have a great day!

我正在使用 React-native 和 React-query，我想在卸载屏幕时停止自动重新获取。

目前，当我转到目标屏幕时，我使用间隔参数调用查询：

使用MissionFetcher：

基本反应查询配置：

退出屏幕时如何停止重新获取？

我有一个Dashboard包含子组件的组件，例如Child它使用 react-query。

Dashboard我有一个开始失败的组件的现有单元测试，错误是：

测试片段：

我阅读了有关测试的文档：

https://react-query.tanstack.com/guides/testing#our-first-test

但我不想一定要使用renderHook，因为我对结果不感兴趣。

编辑：

该Child组件正在使用一个功能：

这就是所谓的：

根据您的回答，我应该创建一个单独的功能：

例如

然后在测试中模拟它。

如果我这样做，我将如何访问：error, isFetching, isError

现在usePosts()将返回一个Promise<QueryObserverResult<unknown, unknown>>

编辑2：

我尝试简化我的代码：

然后用作：

所有作品。

在Dashboard测试中，我然后执行以下操作：

和

和

然后返回：

我是新来的反应和做一个项目。我正在构建一个包含 3 个卡片组件的页面。他们都使用反应查询和 Axios 来获取数据。我的页面有时可以工作，但总是随机向我抛出有关未定义属性“地图”的错误。我在 useState 挂钩中使用空数组作为初始状态，但有时我仍然会收到此错误。无法弄清楚为什么会这样。

这是我的卡片组件的代码。我还有另外两张代码相似的卡。

这是我调用上述组件进行渲染的页面的代码。

这是我添加 Auth 标头的 Axios 实例的代码。我不断收到警报错误“发生服务器/网络错误看起来可能是 CORS 问题。对此很抱歉 - 我们会尽快修复它。” 有时当我刷新。我无法弄清楚为什么会触发它。

请帮助我理解并将我指向相关资源以了解更多信息。