无法在NextJs中显示从SWR检索到的JSON记录

Question

我在尝试显示使用SWR检索的JSON记录时收到错误，但当使用console.log向控制台显示该记录时，该记录显示正确。

TypeError:无法读取未定义(读取"name"(的属性

import useSWR from "swr";
const fetcher = (url) => fetch(url).then((res) => res.json());
export default function Index() {
const { data, error } = useSWR("/api/staticdata", fetcher);
if (error) return <div>Failed to load</div>;
if (!data) return <div>Loading...</div>;
console.log("data is: " + data);
return (
<div>
<h1>My Framework from file</h1>
<ul>
<li>Name: {data.record.name}</li>
<li>Language: {data.record.language}</li>
</ul>
</div>
);
}

console.log显示

data is: {
"record": {
"id": 8221,
"uid": "a15c1f1d-9e4e-4dc7-9c45-c04412fc5064",
"name": "Next.js",
"language": "JavaScript"
}
}

这是一个next.js应用程序。我逐字逐句地使用https://vercel.com/guides/loading-static-file-nextjs-api-route.

如有任何帮助，我们将不胜感激！

Answer 1

useSWR返回的数据实际上不是JSON对象，而是字符串。当我使用JSON.parse时，我能够正确地显示数据。

const obj = JSON.parse(data);
return (
<div>
<h1>My Framework from file</h1>
<ul>
<li>Name: {obj.record.name}</li>
<li>Language: {obj.record.language}</li>
</ul>
</div>
);
}