使用react中的地图在购物车中显示产品

Question

你好，我无法解决这段代码，我的解决方案是最后一个。请引导我。最后项目概述如下：

​

​

细节:在本练习中，我们希望展示用户在购物车中拥有的产品。在初始项目中，路径src/data/index.js中有一个包含这些产品列表的文件。另外，在src/App.js文件中，这个列表中的一个项是静态放置的；您可以使用map来显示产品数组，而不是这个固定的产品。

注意:为了简化工作，还将PersianDigits工具添加到项目中。通过使用此函数，输入的数字将以“金额”格式显示。

​

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

你可以用那里的地图

{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>


))}

就像这样。