我想從我的 products.json 檔案中獲取產品并使用地圖將其顯示在我的 App.js 中，但它不起作用。有什么辦法可以解決這個問題嗎？順便說一句謝謝你幫助我！
應用程式.js：
import "./styles.css";
import { products } from "./data";
export default function App() {
return (
<div className="App">
{products.map((product) => {
return <div>products</div>;
})}
</div>
);
}
資料.json：
{
products:
[
{
id:1,
img: "https://vcdn-vnexpress.vnecdn.net/2017/04/27/strawberry-2129-1493287309.jpg",
title:"strawberry",
price: 3
},
{
id:2,
img: "https://cdn.sallysbakingaddiction.com/wp-content/uploads/2012/01/mm-cookies.jpg",
title:"cookies",
price: 5
},
{
id:3,
img: "https://rangsua.vn/wp-content/uploads/2019/05/juice-bia.jpg",
title:"juice",
price: 7
}
]
}
Sandbox link: https://codesandbox.io/s/cart-vjhfb?file=/src/data.json
uj5u.com熱心網友回復：
兩個問題。（都可能是愚蠢的錯誤）
- 你想使用
product變數，但你正在使用products - 你需要
product用{}. 它看起來像{product.title}
uj5u.com熱心網友回復：
你回傳<div>products</div>，這就是問題所在。用<div>{product.title}</div>;代碼替換
試試這個代碼它的作業
import "./styles.css";
import { products } from "./data";
export default function App() {
return (
<div className="App">
{products.map((product) => {
return <div>{product.title}</div>;
})}
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/403142.html
標籤：