React-Query Returns也无法读取未定义的属性,即使我可以看到ID已设置
我正在尝试学习反应,并遵循很多指南。但是,每次尝试使用参数时都出现了问题。 我只知道这个代码,即使Console.log(ID)打印出正确的数字,也无法读取未定义(读取'id')的属性。
const PracticeList = ({id}) => {
const idTest = id
conosole.log(idTest) //this prints 190 and is not undefined
const { isLoading, isFetching, data, isError } = useQuery(["list",{id:idTest}],GetList,{
retry:1,
retryDelay:500
})
if (isLoading) {
return <p>Loading</p>
}
if (isError) {
return <p>Error getting posts...</p>
}
return (
<div> {isFetching && <p>Updating</p>}{data &&<p>{data.lists}</p>}</div>
)
}
export const GetList = async(key,obj)=>{
console.log(key,obj) //This prints that key is defined but obj is undefined?
const {data} = await ShoppingListAPI.get(`/getShoppingList`,{id:obj.id});
return data;
}
这从来没有真正发生过,因为它以前崩溃了,但我确实知道它是从Postman起作用的。
import axios from 'axios';
export default axios.create({
baseURL:"http://localhost:3005/api/v1/",
});
这是我设置ID BTW的地方。
import './App.css';
import {Container, Typography} from '@mui/material'
import AllLists from './AllLists';
import { useState } from 'react';
import ShoppingList2 from './ShoppingList2';
import Practice from './Practice';
import PracticeList from './PracticeList';
function App() {
const [activeList, setActiveList]= useState(190)
return (
<div className="App">
<Typography>Shopping list</Typography>
<Container maxWidth="lg">
<Practice/>
{activeList&&<PracticeList id={activeList}/>}
</Container>
</div>
);
}
export default App;
I am trying to learn react-query and been following quite a few guides. However everytime I try with parameters something goes wrong.
This code that I have under just keep telling me that Cannot read properties of undefined (reading 'id') even though the console.log(id) prints out the correct number.
const PracticeList = ({id}) => {
const idTest = id
conosole.log(idTest) //this prints 190 and is not undefined
const { isLoading, isFetching, data, isError } = useQuery(["list",{id:idTest}],GetList,{
retry:1,
retryDelay:500
})
if (isLoading) {
return <p>Loading</p>
}
if (isError) {
return <p>Error getting posts...</p>
}
return (
<div> {isFetching && <p>Updating</p>}{data &&<p>{data.lists}</p>}</div>
)
}
export const GetList = async(key,obj)=>{
console.log(key,obj) //This prints that key is defined but obj is undefined?
const {data} = await ShoppingListAPI.get(`/getShoppingList`,{id:obj.id});
return data;
}
This never really happends as it crashes before, but I do know it works from postman.
import axios from 'axios';
export default axios.create({
baseURL:"http://localhost:3005/api/v1/",
});
This is where I set the Id btw.
import './App.css';
import {Container, Typography} from '@mui/material'
import AllLists from './AllLists';
import { useState } from 'react';
import ShoppingList2 from './ShoppingList2';
import Practice from './Practice';
import PracticeList from './PracticeList';
function App() {
const [activeList, setActiveList]= useState(190)
return (
<div className="App">
<Typography>Shopping list</Typography>
<Container maxWidth="lg">
<Practice/>
{activeList&&<PracticeList id={activeList}/>}
</Container>
</div>
);
}
export default App;
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
由于V3,React-Query将一个称为
QueryFunctionContext
的对象注入QueryFN。它包含Querykey等信息。因此,如果您的查询是:
您可以在
GetList
中提取QueryKey:QueryKey [0]
将为“ list”
和querykey [1]
应该是包含id
的对象。since v3, react-query injects an object called the
QueryFunctionContext
into the queryFn. It contains the queryKey, among other information.So if your query is:
you can extract the queryKey in
GetList
via:queryKey[0]
will then be"list"
andqueryKey[1]
should be your object that contains theid
.尝试一下
try this