無法回傳jsx組件內的映射項

嘿伙計們，我正在嘗試根據類別顯示專案串列，這是我的 json 結構。我想根據 itemCategory 顯示物件。例如，如果有兩個或更多比薩餅，它們應歸入一個類別標題。

   {
        "itemid": 3,
        "itemName": "Veg OverLoaded",
        "itemPrice": 300.0,
        "itemDescription": "chessy, tasty, covered with fresh veggies",
        "itemCategory": "pizza"
    },

為此，我創建了一個物件映射，并根據類別作為鍵傳遞資料。

      import React, { forwardRef,useState } from 'react';
      import MenuItem from './MenuItem';
      import './styles.css';
      import Category from '../../Home/Category'

  

      const NewMap = new Map()
    
      const Menu = forwardRef(({ list }, ref) => (
        <>
       <main ref={ref} >

    {Object.values(list).map((k) => {
      if (NewMap.has(k.itemCategory)){
        const itemList = NewMap.get(k.itemCategory);
        const newItemList = [...itemList, k];
        NewMap.set(k.itemCategory, newItemList);
      }else{
        NewMap.set(k.itemCategory , [k]);
      }
    })}

    <MenuItem itemMap = {NewMap}/>
   

   </main>
   </>

      ));

我將地圖作為道具傳遞給 MenuItem 并嘗試在此處顯示物件

import React, { useState, useEffect } from 'react';

import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import {
  cartAddItem,
  cartRemoveItem,
} from '../../../../redux/cart/cart.action';
import {
  selectCartItems,
  selectCartItemsCount,
} from '../../../../redux/cart/cart.selector';

import ButtonAddRemoveItem from '../../ButtonAddRemoveItem';
import './styles.css';
import Accordion from 'react-bootstrap/Accordion'
import useFetchData from './newData'


const MenuItem = ({
  itemMap,
  cartCount,
  cartList,
  cartAddItem,
  cartRemoveItem,
}) => {
  const {
    data,
    loading,
  } = useFetchData();

  const handleQuantity = () => {
    let quantity = 0;
    if (cartCount !== 0) {
      const foundItemInCart = cartList.find((item) => item.itemid === 1);
      if (foundItemInCart) {
        quantity = foundItemInCart.quantity;
      }
    }
    return quantity;
  };

  return (

    <>
      {itemMap.forEach((key, value) => {
        {console.log(value)}
        <div className='container-menu' >
          {console.log(value)}
          <ul>
            {Object.values(key).map((blah) => {
              <li>
                  <h1>{blah.itemName}</h1>
                <div className='item-contents'>
                  {blah.itemName}
                  <p className='item-contents' style={{ float: "right", fontSize: "12" }}> ? {blah.itemPrice}</p>
                  <div>
                    <p className='description'>{blah.itemDescription}</p>
                    <ButtonAddRemoveItem
                      quantity={handleQuantity()}
                      handleRemoveItem={() => cartRemoveItem(blah)}
                      handleAddItem={() => cartAddItem(blah)}
                    />

                  </div>


                </div>

              </li>
            })}
          </ul>
        </div>

      })}

      

    </>

  );
};

const mapStateToProps = createStructuredSelector({
  cartCount: selectCartItemsCount,
  cartList: selectCartItems,
});

const mapDispatchToProps = (dispatch) => ({
  cartAddItem: (item) => dispatch(cartAddItem(item)),
  cartRemoveItem: (item) => dispatch(cartRemoveItem(item)),
});

export default connect(mapStateToProps, mapDispatchToProps)(MenuItem);

  export default Menu;

我可以使用 console.log itemName 但我無法在 jsx 組件中顯示它。有什么理由嗎？我在這里錯過了什么

uj5u.com熱心網友回復：

foreach 回圈應該回傳 JSX。在你的情況下，沒有回報。我建議洗掉大括號。

錯誤的：

itemMap.forEach((key, value) => {
  <>
  </>
})

正確的：

itemMap.forEach((key, value) => (
  <>
  </>
))

這對 JSX 中的所有回圈都有效。

uj5u.com熱心網友回復：

要回傳元素陣列，您應該使用map而不是forEach像下面的代碼，因為forEach回圈回傳undefined，而 map 總是回傳一個陣列。

{itemMap.map((key, value) => {
   return (<div className='container-menu'>
    ...
   </div>)
 }
}

或者

{itemMap.map((key, value) => (<div className='container-menu'>
    ...
  </div>)
}

標籤：反应

上一篇：找不到模塊：無法決議“react-route-dom”我嘗試了很多但無法解決

下一篇：npm不安裝npm每次運行都會出現TypeError