问无法正确设置react查询？
EN

Stack Overflow用户

提问于 2022-07-29 12:32:45

回答 1查看 757关注 0票数 1

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

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;

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

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所接受。作为比较，这个组件工作得非常好：

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。

reactjs

version

fetch-api

react-query

企业复产复工专享

为企业提供海量产品优惠，助力中小企业数字化转型升级

回答 1

Stack Overflow用户

回答已采纳

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

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

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}`);
    }
}

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>)
}