如何在以下代码中使用 map 和道具添加部分

Question

我有一张名为 CardItems.jsx 的卡片，它只定义了一张卡片，然后我有了 Gotocart。 我在 jsx 中有欢迎部分（如欢迎加入购物车）和最后一个订购部分（如立即订购）。

在这两者之间，我想添加购物车部分，然后用户将在另一个页面上单击“添加项目”，然后一些 id 将存储在 infoarray 中，所有这些都正常工作，我能够控制正确的名称和图像但我无法添加部分。

这是 Cartitme.jsx

import React from 'react'
import cartstyle from './cartstyle.css'
import { useState } from 'react';
import { data } from './Data';
//  below is destructuring
export default function Cartitems(props) {
    const [cart, setcart] = useState(data);
    return (
        <div>

            <div className="information">

                <div className="imagecart">
                    <img className='img12' src={props.images} alt="error" />
                    <div className="nameofitem"> {props.name} </div>
                </div>

                <div className="quantity">
                    <button className="minus">-</button>
                    <button className="quantity">1</button>
                    <button className="add">+</button>
                    <i class="fa-solid fa-trash"></i>
                </div>

            </div>

        </div>
    )
}

这是 Gotocart.jsx

import React from 'react'
import { useState } from 'react'
// import Gotocart from './Gotocart.css'
import {data} from './Data'
import Cartitems from './Cartitems';
import { infoarray } from './Menu';
export default function Gotocart(props) {
  let index = document.getElementsByClassName('cart-info');
  return (
    <div className='cartbody'>

      <div className="heading">
        <div></div>
        <div className="welcome">
        Welcome To the Cart
        </div>
        </div>

      <div className="thanks">
        <div></div> THANKS FOR VISITING
        </div>
      <div className="cart-info">

      {
        data.map((e) => {
          infoarray.map((ank) =>{
              if(e.id==ank){
                console.log(e.name , e.images) ; 
                return <Cartitems name={e.name} images={e.images}  />
              }
          })
        })
      }
      </div>
      <div className="order">
        <div></div>
        ORDER NOW
      </div>
    </div>
  )
}
 

如何在 Gotocart 部分查看卡片列表

Answer 1

你忘记回来了。 您也应该过滤数据

{
  data.map((e) => {
    return infoarray.filter(ank => ank === e.id).map((ank) =>{
      return <Cartitems name={e.name} images={e.images}  />
    })
  })
}

Answer 2

正如之前有人评论的那样，你必须在 map 迭代中返回一些东西，并且还像这样渲染组件

{
  data.map((e) => {
    return infoarray.filter(ank => ank === e.id).map((ank) =>{
    return (<Cartitems name={e.name} images={e.images}  />)
   })
 })
}

如果在这样做之后你仍然看不到你的组件是因为你可能有一个错误