在反應中使用 map 在購物車中顯示產品

Question

您好，我無法解決這段代碼，我的解決方案是最后一個。 請指導我。 最終項目概況如下：

細節：在這個練習中，我們想要顯示用戶在他的購物車中的產品。 在初始項目中，路徑 src/data/index.js 中有一個文件，其中包含這些產品的列表。 另外，以 src/App.js 文件為例，該列表中的一項是靜態放置的； 您使用 map 來顯示產品陣列而不是此固定產品。

注意：為簡化工作，項目中還添加了 PersianDigits 工具。 通過使用此 function，輸入的數字將以金額格式顯示。

 import { PersianDigits } from "./utils"; console.log(PersianDigits(100000)) //ریال ۱۰۰٬۰۰۰

請求的更改 根據給定的數組顯示列表 注意 您只能修改 App.js 文件。

index.js 中的產品：

 export const products = [ { id: 1, name: "رب گوجه فرنگی", price: 40_000, image: "https://quera.ir/qbox/view/0Cur3oz893/1.jpg", }, { id: 2, name: "شیر سویا", price: 80_000, image: "https://quera.ir/qbox/view/JKxED84wZp/2.jpg", }, { id: 3, name: "نارگیل", price: 70_000, image: "https://quera.ir/qbox/view/d0CdIY6XGt/3.jpg", }, { id: 4, name: "هویج", price: 10_000, image: "https://quera.ir/qbox/view/lHrc5ketfC/4.jpg", }, { id: 5, name: "کاپ کیک", price: 20_000, image: "https://quera.ir/qbox/view/McoK2FpgNo/5.jpg", }, ];

app.js 中的代碼

 import "./App.css"; import { products } from "./data"; import { PersianDigits } from "./utils"; function App() { return ( <div className="d-flex justify-content-center align-items-center vh-100"> <div className="container"> <div className="row"> <div className="col"> <h3 className="text-center mb-5">سبد خرید</h3> </div> </div> <div className="row"> <div className="col"> <div className="list-group"> {/* Repeat this item*/} <div className="list-group-item"> <div className="d-flex align-items-center justify-content-between"> <img src="https://quera.ir/qbox/view/0Cur3oz893/1.jpg" alt="رب گوجه فرنگی" className="product-image" /> <span>رب گوجه فرنگی</span> {/* With this function, you can display the number in Rial format*/} <span>{PersianDigits(40_000)}</span> </div> </div> {/* Repeat this item*/} </div> </div> </div> </div> </div> ); } export default App;

Answer 1

您可以在那里使用 map

{products.map(data=>(
<div className="list-group-item">
                <div className="d-flex align-items-center justify-content-between">
                  <img
                    src={data.image}
                    alt="رب گوجه فرنگی"
                    className="product-image"
                  />
                  <span>رب گوجه فرنگی</span>
                  {/* With this function, you can display the number in Rial format*/}
                  <span>{PersianDigits(data.price)}</span>
                </div>
              </div>


))}

像那樣。