我正在嘗試獲取從本地 JSON 檔案派生的“板條箱”（裝滿記錄/專輯的板條箱）的名稱。但它沒有出現。我應該使用引數嗎？我不應該對 JSON 進行字串化嗎？VSC 告訴我字串型別上不存在屬性“資料”。在此之前，我收到 crates.map 不是函式的錯誤，表明 JSON 是物件而不是陣列。
公共/data.json
"crates": [{
"id": 1,
"nameCrate": "Pauls crate",
"albums": ["Blue Bossa", "Boogarins"]
},
{
"id": 2,
"nameCrate": "Lauras crate",
"albums": ["ABBA", "Blof"]
}
]
}
索引.tsx
import { useState, useEffect } from 'react'
export default function Home() {
interface Crate {
id: string;
nameCrate: string;
albums: string;
}
const [crates, setCrates] = useState<Array<Crate>>([]);
useEffect(() => {
fetch('data.json',{
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
})
.then((res) => res.json())
.then((resJson) => {const data = JSON.stringify(resJson)
setCrates(data.data)})
}, [])
console.log(crates)
return (
<div>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
Main
{crates && crates.map((crate) => (<div key={crate.id} {...crates}>{crate.nameCrate}</div>))}
</main>
<footer className="bg-black">
<div>This is the footer </div>
</footer>
</div>
)
}
uj5u.com熱心網友回復：
無需字串化，因為回應是 json
{
const data = resJson.crates
setCrates(data)// set crates
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/530704.html