无法在 jsx 组件中返回映射项

Question

嘿，伙计们，我正在尝试根据类别显示项目列表，这是我的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组件中显示它。为什么？这里缺少什么

Answer 1

foreach循环应该返回JSX。在你的情况下，没有回报。我建议去掉花括号。

错误：

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

正确：

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

这对JSX中的所有循环都有效。

Answer 2

要返回元素数组，应该使用map，而不是像下面的代码那样使用forEach，因为forEach循环返回undefined，而map总是返回数组。

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

或

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