RTK 查询调用有时会返回"undefined"

Question

我试图从钩子调用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为true，错误消失，但数据不显示

Answer 1

获取数据是一个异步作业，这意味着当javascript读取您的代码时，它将传递异步代码行并继续读取下一行。因此，当javascript到达console.log时，数据是undefined，有时网络很快，数据在javascript到达console.log之前加载。所以你得处理好这件事。javascript在这方面有很多方法，比如callback函数或promises，你应该知道async await，基本上向服务器发出请求只是一个promise。

为什么数据是undefined而不是null?这是因为javascript主要有两个阶段的阅读JS代码。一个是创建阶段，第二个是执行阶段。在创建阶段，javascript为所有变量分配内存，并将变量的值设置为undefined，在执行阶段，它实际上将实际值分配给变量。因此，在请求完成后，值将被数据填充。

在你的情况下

export default function useProjects(){
const { data, isLoading, isFetching} = useGetSomeProjectsQuery({page, 
languages, title});

if ( isLoading || isFetching ) return <p>Loading ... </p>

// here do something with data
}

，并记住将所有查询参数作为单个对象传递给queryHook。

Answer 2

按下面的方法做。一切都会好起来的

//决定渲染的内容

let content = null;

if (isLoading) {
content = (
<>
<VideoLoader />
<VideoLoader />
<VideoLoader />
<VideoLoader />
</>
);
}
if (!isLoading && isError) {
content = <Error message="There was an error" />;
}
if (!isLoading && !isError && videos?.length === 0) {
content = <Error message="No videos found!" />;
}
if (!isLoading && !isError && videos?.length > 0) {
content = videos.map((video) => <Video key={video.id} video={video} />);
}
return content;

}