React-Query Returns也无法读取未定义的属性,即使我可以看到ID已设置

发布于 2025-01-24 19:14:38 字数 1812 浏览 2 评论 0原文

我正在尝试学习反应,并遵循很多指南。但是,每次尝试使用参数时都出现了问题。 我只知道这个代码,即使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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

雾里花 2025-01-31 19:14:38

由于V3,React-Query将一个称为QueryFunctionContext的对象注入QueryFN。它包含Querykey等信息。

因此,如果您的查询是:

useQuery(["list",{id:idTest}],GetList)

您可以在GetList中提取QueryKey:

const GetList = (queryFunctionContext) => {
  const queryKey = queryFunctionContext.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:

useQuery(["list",{id:idTest}],GetList)

you can extract the queryKey in GetList via:

const GetList = (queryFunctionContext) => {
  const queryKey = queryFunctionContext.queryKey
}

queryKey[0] will then be "list" and queryKey[1] should be your object that contains the id.

平安喜乐 2025-01-31 19:14:38

尝试一下

()=>GetList(idTest)
const { isLoading, isFetching, data, isError } = useQuery(["list",{id:idTest}],()=>GetList(idTest),{

try this

()=>GetList(idTest)
const { isLoading, isFetching, data, isError } = useQuery(["list",{id:idTest}],()=>GetList(idTest),{
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文