Next.js JSON对象的Typescript句柄

Question

我正在用Next.js和Typescript做一个个人项目。我在hello上有一个API调用。我在上面添加了一个JSON文件。目前，我在映射JSON和渲染它的内容时遇到了问题。目前，JSON在useState内，但是当我试图用它做一些事情时，浏览器和控制台给我错误。

这是hello.ts和较小的JSON位于这里/pages/api/hello:

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next'
type Data = {
clientName: string
campaignName: string
userName: string
frames: {
id: string
asset: string
subheading: string
description: string
link: string
}[]
}
export default function handler(
req: NextApiRequest,
res: NextApiResponse<Data>
) {
res.status(200).json({
userName: "username",
frames: [
{
id: "1",
asset: "",
subheading: "Instagram",
description: "",
link: "someurl.com"
},
{
id: "3",
asset: "",
subheading: "Facebook",
description: "username Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin metus vitae",
link: "someurl.com"
}
] })
}

这是我调用位于components/container的api的地方:

import { useEffect, useState } from "react";
import { FrameContainerProps } from "../../types";
const FrameContainer: React.FC<FrameContainerProps> = () => {
const  [apiDetails, setapiDetails] = useState<any>();
useEffect(() => {
fetch('http://localhost:3000/api/hello')
.then((res) => {
return res.json();
})
.then(
(data) => {
setapiDetails(data);
},
(err) => {
return console.error(err);
}
);
}, []);
return (
<>
{Object.entries(apiDetails).map(detail => (
<h3>{detail.frames[i].description ? detail.frames[i].description : ''}</h3>
))}
</>
)
}
export default FrameContainer;

另外，我怎么能呈现数据只有当它有值在里面?

Answer 1

将apiDetails默认值设置为null，并添加检查以查看数据是否已加载。
同时，你应该在apiDetails.frames:

上设置map

import { useEffect, useState } from 'react';
import { FrameContainerProps } from '../../types';
const FrameContainer: React.FC<FrameContainerProps> = () => {
const [apiDetails, setapiDetails] = useState<any>(null);
useEffect(() => {
fetch('http://localhost:3000/api/hello')
.then((res) => {
return res.json();
})
.then((data) => {
setapiDetails(data);
})
.catch((err) => {
return console.error(err);
});
}, []);
if (!apiDetails) return <>Loading data...</>;
return (
<>
{apiDetails.frames && apiDetails.frames.map((frame) => (
<h3>
{frame.description || ''}
</h3>
))}
</>
);
};
export default FrameContainer;