如何在以下代碼中使用 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}  />)
   })
 })
}

如果在這樣做之后你仍然看不到你的組件是因為你可能有一個錯誤