我對 Next 比較陌生，但這是問題所在。我有一個靜態 JSON 檔案，它位于我的專案目錄的根目錄中，如下所示
{"data":[{"id":1,"attributes":{"name":"Test Product 1","content":"Stvarno ne znam sta bi dodao ovdje jer samo testiram","meta_description":"Opis koji moze da stoji u meti / SEO i to","meta_title":"Testni Product - Lion Kingdom","price":12.99,"slug":"test-product-1","createdAt":"2022-04-17T12:12:36.787Z","updatedAt":"2022-04-17T12:12:39.540Z","publishedAt":"2022-04-17T12:12:39.531Z"}},{"id":2,"attributes":{"name":"Test Product 2","content":"Jos jedan testni post da testiram producte v2","meta_description":"Neki opis za metu","meta_title":"Testni Product 2 - Lion Kingdom","price":49700,"slug":"test-product-2","createdAt":"2022-04-17T12:15:04.241Z","updatedAt":"2022-04-17T12:15:05.078Z","publishedAt":"2022-04-17T12:15:05.075Z"}}],"meta":{"pagination":{"page":1,"pageSize":25,"pageCount":1,"total":2}}}
現在我正在嘗試將它作為道具傳遞給網站以在網站上使用它，但由于某種未知原因無法使用，編譯器沒有顯示任何錯誤，但 div 仍然顯示為空，沒有從 json 中獲取任何內容。這是我接下來的設定方式
在頂部定義它
import products from '../products.json'
然后在體內
export default function index() {
return (
<div>
<Head>
<title> ECommerce Alpha</title>
<link rel="icon" href="/favicon.ico" />
</Head>
{products.data.map(product => {
<div key={product.attributes}>
<div>{product.attributes.name}</div>
</div>
})}
</div>
)
}
結果仍然是一個空白頁，如果有人能指出為什么 next 沒有從檔案中靜態獲取它，我將不勝感激:)
uj5u.com熱心網友回復：
您看到的是空白頁，因為您map()的箭頭函式缺少明確的return宣告：
{products.data.map((product) => {
// this is a block body (i.e., opened with a brace), so you need a `return`
return (
<div key={product.id}>
<div>{product.attributes.name}</div>
</div>
);
})}
您可以return通過不使用大括號來進行隱式：
{products.data.map((product) => (
// group with parentheses instead
<div key={product.id}>
<div>{product.attributes.name}</div>
</div>
))}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/461980.html
標籤：javascript 反应 网络 下一个.js