我尝试从钩子调用useGetSomeProjectsQuery()调用数据键,这是在钩子useProjects()中。
import { useState, useEffect } from "react";
import { useGetSomeProjectsQuery } from "./projectsApi";
export default function useProjects() {
const [page, setPage] = useState(1);
const [title, setTitle] = useState("");
const [languages, setLanguages] = useState("");
const [withDetails, setWithDetails] = useState([]);
const newProjects = useGetSomeProjectsQuery(page, languages, title);
const getprojects = newProjects.data.projects;
useEffect(() => {
setWithDetails(
getprojects.map((project) => {
return { ...project, details: false };
})
);
}, [getprojects]);
return { withDetails };
}
有时数据就在我打开页面的时候出现。其他时候,它返回“未定义”。这是在我没有对代码进行更改的情况下。
更具体地说上面说
Cannot read properties of undefined (reading 'projects')
关于
const getprojects = newProjects.data.projects;
我认为问题出在计时上,所以我尝试使用async/await
export default async function useProjects(){
const newProjects = useGetSomeProjectsQuery(page, languages, title);
const getprojects = async newProjects.data.projects;
}
但这并不起作用。我还尝试在“getprojects”变量上使用setTimeout,但也失败了。最后,我检查了API本身是否正常工作,它可以正常打开https://mernportfolio.onrender.com/api/v1/projects
编辑:尝试newProjects. isSuccess也是如此,当我设置它时,只有当newProjects.isSuccess为真时,数据才会出现,错误会消失,但数据不会出现。
1条答案
按热度按时间lhcgjxsq1#
获取数据是一个异步工作,这意味着当JavaScript读取你的代码时,它将通过异步代码行并继续读取下一行。因此,当javascript到达
console.log
时,数据是undefined
,有时网络速度很快,数据在javascript读取到达console.log
之前加载,因此您需要处理此问题,javascript在此领域有许多方法,例如callback
函数或promises
和async await
,而向服务器发出请求只是一个幕后承诺。为什么data是
undefined
而不是null
呢?那是因为javascript读取JS代码主要有两个阶段,一个是创建阶段,一个是执行阶段,在创建阶段javascript给你所有的变量分配内存,把变量的值设置为undefined
,在执行阶段,它实际上将实际值赋给变量。因此,在请求完成后,该值将填充数据。就你而言
并记住将所有查询参数作为单个对象传递给queryHook。