无法正确设置react查询？
无法正确设置react查询？
提问于 2022-07-29 20:32:45
好的，这个问题不是很精确，但是我想不出更好的方法来表达: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。
回答 1
Stack Overflow用户
回答已采纳
发布于 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>)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73170749
复制相关文章
相似问题
腾讯云开发者
