首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >无法正确设置react查询?

无法正确设置react查询?
EN

Stack Overflow用户
提问于 2022-07-29 20:32:45
回答 1查看 757关注 0票数 1

好的,这个问题不是很精确,但是我想不出更好的方法来表达:react-查询不像预期的那样。我创建了一个尽可能接近文档的最小示例,以排除所有其他可能的错误来源。在这个示例中,我呈现两个组件,一个尝试使用react查询,另一个使用普通的旧useEffect和useState钩子。

代码语言:javascript
代码运行次数:0
运行
复制
import ReactDOM from 'react-dom/client';
//the import from react-query is where the first error appears: 'Could not find a declaration file for module 'react-query'.' I fixed it by creating a .d.ts file, but have the feeling it has something to do with the library not working 
import {useQuery, QueryClient, QueryClientProvider} from 'react-query';
import { useEffect, useState } from 'react';

function App() {
  const queryClient = new QueryClient();
  return (
    <QueryClientProvider client={queryClient}>
        <h1>Todos</h1>
        {/* this one tries to use react-query, unsuccessfully */}
        <Todos />
        {/* this one uses useState and useEffect, works as expected */}
        <Todos2 />
    </QueryClientProvider>
  );
}
export default App;

除了需要一个声明文件之外,没有什么不寻常的。但是在这个组件中它确实变得很奇怪:

代码语言:javascript
代码运行次数:0
运行
复制
function Todos() {
  const query = useQuery('todos', async () => {
    const res = await fetch('http://localhost:5555/todos');
    return res.json()
  })
  
  console.log('query results: ', query)
  return (
    <ul className='todos'>
      {
        query.data && query.data.map(todo => (
        <li key={todo.name}>{todo.name}</li>
      ))}
   </ul>)
}

运行此操作只会出现“缺少queryFn”的错误。即使在我找到的每一个教程之后,也没有一个函数被useQuery所接受。作为比较,这个组件工作得非常好:

代码语言:javascript
代码运行次数:0
运行
复制
function Todos2() {
  const [todos, setTodos] = useState(null);
  useEffect(() => {
    fetch('http://localhost:5555/todos')
      .then(data => data.json())
      .then(data => setTodos(data))
  }, [])
  return (
    <ul className='todos'>
      {
        todos && todos.map(todo => (
        <li key={todo.name}>{todo.name}</li>
      ))}
   </ul>)
}

我已经束手无策,想不出任何我还能设法使这件事成功的办法。很可能我忘了一些基本的东西,但我就是找不到。我非常感谢任何正确方向的指点。如果您想看到完整的代码:https://github.com/ThemisDaughter/example-react-query (npm应该让应用程序运行),我使用的版本也是Reve18.2.0和ReactiveQuery4.0.0。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-07-29 21:27:54

我认为在react查询4中,查询键需要是数组吗?无论如何,这就是我在组件中编写查询的方式,您也应该将这一行const queryClient = new QueryClient()从应用程序组件中删除,也许可以将其放在它之上。

代码语言:javascript
代码运行次数:0
运行
复制
const fetchTodos = async () => {
    const res = await fetch('http://localhost:5555/todos');
    if(res.ok){
        return res.json()
    }
    else {
        throw new Error(`Error: ${res.status} ${res.statusText}`);
    }
}
代码语言:javascript
代码运行次数:0
运行
复制
function Todos() {
    const query = useQuery(['todos'], fetchTodos)
    return (
        <ul className='todos'>
            {
                !!query.data && query.data.map(todo => (
                <li key={todo.name}>{todo.name}</li>
            ))}
        </ul>)
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73170749

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档