在反应中使用 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>


))}

像那样。