好的,这个问题不是很精确,但是我想不出更好的方法来表达: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。
发布于 2022-07-29 21: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>)
}
https://stackoverflow.com/questions/73170749
复制相似问题