在React类型记录中对数组的映射
在React类型记录中对数组的映射
提问于 2022-10-02 12:57:52
我有一个静态数据结构，它是我的下一个项目的API路由提供的，它是一个具有以下接口的对象数组：
export interface Case {
id: string;
title: string;
beteiligte: string[];
gerichtstermin?: string;
tasks?: [];
}我使用React查询来提取组件中的数据：
const Cases:React.FC = () => {
const { data, status } = useQuery("cases", fetchCases);
async function fetchCases() {
const res = await fetch("/api/dummy-data");
return res.json();
}
return (
<DefaultLayout>
<Loading loading={status === "loading"} />
{data.cases.map((case)=><p>{case.name}</p>)}
</DefaultLayout>
);
}
export default Cases;但当我试图对数据进行映射时，我总是得到这些乱七八糟的线条和一个令人难以置信的模糊错误：
我已经尝试了所有我能想到的东西，并且通过React查询文档，类型记录指南，当然还有很多，很多堆叠溢出的文章，我已经搜索了很多。请帮帮我！(打字稿新手)
更新：
当我输入{data.cases.map(()=>console.log("hello")}时，根本没有错误。但是，一旦我向匿名函数添加了一个参数，错误就会弹出：{data.cases.map((case)=>console.log("hello"))}
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-10-02 13:16:25
- 在case接口中，您没有"name“属性。
- 只有当
success是true时，您才应该进行映射。你得守着你的密码。看看你得到了什么，console.log(data)。此外，在映射时使用key支柱 {status === "success“&& ( // case是保留字。使用不同的名称{data.cases.map((caseItem) => ( {caseItem.name} )} )} case是一个保留词。如果你用任何其他词，它就会起作用。
Stack Overflow用户
发布于 2022-10-02 14:19:47
我试着把你的问题复制到沙箱里，我设法把它变成了“传送带”。
- 您必须向Case接口中添加字符串类型的支柱名称，才能使用它。
export interface Case {
name: string;
id: string;
title: string;
beteiligte: string[];
gerichtstermin?: string;
tasks?: [];
}
// in my example interface is named CaseResonse - 我假设您的API响应如下所示
{ "data": { "cases": [] } }- 您必须定义API响应才能使用：
interface GetCaseResponseWrapper {
cases: Array<Case>;
}
// in my example it is array of CaseResponse
interface GetCaseResponseWrapper {
cases: Array<CaseResponse>;
}- 你需要装饰你的fetchCases才能返回
GetCaseResponseWrapper
async function fetchCases() {
const res = await fetch("/api/dummy-data");
const jsonResult = await res.json();
return jsonResult.data as GetCaseResponseWrapper;
}- 来自useQuery的数据可能没有定义，所以您应该使用?.
{data?.cases.map((c) => (
<p>{c.name}</p>
))}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73925992
复制相关文章
相似问题
腾讯云开发者
