问题

我正在尝试根据项目的类别显示项目列表，一个项目可以属于多个类别。

我希望将同一类别中的所有产品分组，并显示为一个列表。

以下是来自API的响应：

{
  "menu_items": [
    {
      "categorys": [
        {
          "category_id": 1,
          "category_name": "Starters",
          "category_public_id": "1686264145980.3584",
          "created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
          "description": "kmkmppp",
          "menu": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
          "updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
        }
      ],
      "created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
      "ingredients": ",p[ollp[lp[l",
      "is_active": "active",
      "itemId": 1,
      "item_image": "https://res.cloudinary.com/dlh67cflz/image/upload/v1686264184/nova-ecommerce-products/jlazjhamnu6giineb2vb.jpg",
      "item_name": "grilled pork",
      "item_public_id": "1686264200760.36",
      "menus": [
        {
          "created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
          "isActive": true,
          "menu_description": "kjmkmlk",
          "menu_id": 1,
          "menu_name": "christmas special",
          "menu_public_id": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
          "menu_type": "dine_in",
          "merchant_id": "a46f810c-9f01-4eb2-b95a-2454959e4bbe",
          "updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
        }
      ],
      "price": 4500.0,
      "rating": null,
      "status": "in_stock",
      "updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
    },
    {
      "categorys": [
        {
          "category_id": 1,
          "category_name": "Starters",
          "category_public_id": "1686264145980.3584",
          "created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
          "description": "kmkmppp",
          "menu": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
          "updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
        }
      ],
      "created_at": "Wed, 21 Jun 2023 13:22:43 GMT",
      "ingredients": "with soy sauce, cabbage, onions",
      "is_active": "active",
      "itemId": 2,
      "item_image": "https://res.cloudinary.com/dlh67cflz/image/upload/v1687343564/nova-ecommerce-products/qbdlhnesmzt9uoqffq7z.webp",
      "item_name": "grilled pork",
      "item_public_id": "1687343605822.5493",
      "menus": [
        {
          "created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
          "isActive": true,
          "menu_description": "kjmkmlk",
          "menu_id": 1,
          "menu_name": "christmas special",
          "menu_public_id": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
          "menu_type": "dine_in",
          "merchant_id": "a46f810c-9f01-4eb2-b95a-2454959e4bbe",
          "updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
        }
      ],
      "price": 25000.0,
      "rating": null,
      "status": "in_stock",
      "updated_at": "Wed, 21 Jun 2023 13:22:43 GMT"
    },
    {
      "categorys": [
        {
          "category_id": 2,
          "category_name": "Dinner",
          "category_public_id": "1687977074146.201",
          "created_at": "Wed, 28 Jun 2023 21:08:30 GMT",
          "description": "jnjniojiojo",
          "menu": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
          "updated_at": "Wed, 28 Jun 2023 21:08:30 GMT"
        }
      ],
      "created_at": "Wed, 28 Jun 2023 21:08:30 GMT",
      "ingredients": "with minsed matooked and rice",
      "is_active": "active",
      "itemId": 3,
      "item_image": "https://res.cloudinary.com/dlh67cflz/image/upload/v1687977153/nova-ecommerce-products/nocjoso04uur4fm8hkfd.webp",
      "item_name": "mushroom soup",
      "item_public_id": "1687977183611.3896",
      "menus": [
        {
          "created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
          "isActive": true,
          "menu_description": "kjmkmlk",
          "menu_id": 1,
          "menu_name": "christmas special",
          "menu_public_id": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
          "menu_type": "dine_in",
          "merchant_id": "a46f810c-9f01-4eb2-b95a-2454959e4bbe",
          "updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
        }
      ],
      "price": 45000.0,
      "rating": null,
      "status": "in_stock",
      "updated_at": "Wed, 28 Jun 2023 21:08:30 GMT"
    }
  ],
  "success": true
}

我目前卡在这里，尝试了以下代码，但没有产生预期的结果：

{Items?.menu_items?.map((items, index) => (
  <div className='mb-8'>
    {items?.categorys.map(c => (
      <>
        {c.category_public_id === items?.categorys[0]?.category_public_id && (
          <>
            <h2 className

<details>
<summary>英文:</summary>

I am trying to display items in a list based on category of the items, an item can belong to a list of categories.

I want all products in a category to be grouped under that category and display as a list

Below is my response from API

{
"menu_items": [
{
"categorys": [
{
"category_id": 1,
"category_name": "Starters",
"category_public_id": "1686264145980.3584",
"created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
"description": "kmkmppp",
"menu": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
"updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
}
],
"created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
"ingredients": ",p[ollp[lp[l",
"is_active": "active",
"itemId": 1,
"item_image": "https://res.cloudinary.com/dlh67cflz/image/upload/v1686264184/nova-ecommerce-products/jlazjhamnu6giineb2vb.jpg",
"item_name": "grilled pork",
"item_public_id": "1686264200760.36",
"menus": [
{
"created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
"isActive": true,
"menu_description": "kjmkmlk",
"menu_id": 1,
"menu_name": "christmas special",
"menu_public_id": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
"menu_type": "dine_in",
"merchant_id": "a46f810c-9f01-4eb2-b95a-2454959e4bbe",
"updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
}
],
"price": 4500.0,
"rating": null,
"status": "in_stock",
"updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
},
{
"categorys": [
{
"category_id": 1,
"category_name": "Starters",
"category_public_id": "1686264145980.3584",
"created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
"description": "kmkmppp",
"menu": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
"updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
}
],
"created_at": "Wed, 21 Jun 2023 13:22:43 GMT",
"ingredients": "with soy sauce, cabbage, onions",
"is_active": "active",
"itemId": 2,
"item_image": "https://res.cloudinary.com/dlh67cflz/image/upload/v1687343564/nova-ecommerce-products/qbdlhnesmzt9uoqffq7z.webp",
"item_name": "grilled pork",
"item_public_id": "1687343605822.5493",
"menus": [
{
"created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
"isActive": true,
"menu_description": "kjmkmlk",
"menu_id": 1,
"menu_name": "christmas special",
"menu_public_id": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
"menu_type": "dine_in",
"merchant_id": "a46f810c-9f01-4eb2-b95a-2454959e4bbe",
"updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
}
],
"price": 25000.0,
"rating": null,
"status": "in_stock",
"updated_at": "Wed, 21 Jun 2023 13:22:43 GMT"
},
{
"categorys": [
{
"category_id": 2,
"category_name": "Dinner",
"category_public_id": "1687977074146.201",
"created_at": "Wed, 28 Jun 2023 21:08:30 GMT",
"description": "jnjniojiojo",
"menu": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
"updated_at": "Wed, 28 Jun 2023 21:08:30 GMT"
}
],
"created_at": "Wed, 28 Jun 2023 21:08:30 GMT",
"ingredients": "with minsed matooked and rice",
"is_active": "active",
"itemId": 3,
"item_image": "https://res.cloudinary.com/dlh67cflz/image/upload/v1687977153/nova-ecommerce-products/nocjoso04uur4fm8hkfd.webp",
"item_name": "mushroom soup",
"item_public_id": "1687977183611.3896",
"menus": [
{
"created_at": "Fri, 09 Jun 2023 01:05:50 GMT",
"isActive": true,
"menu_description": "kjmkmlk",
"menu_id": 1,
"menu_name": "christmas special",
"menu_public_id": "ff14ac35-a26d-4957-bb84-e55bcf04406a",
"menu_type": "dine_in",
"merchant_id": "a46f810c-9f01-4eb2-b95a-2454959e4bbe",
"updated_at": "Fri, 09 Jun 2023 01:05:50 GMT"
}
],
"price": 45000.0,
"rating": null,
"status": "in_stock",
"updated_at": "Wed, 28 Jun 2023 21:08:30 GMT"
}
],
"success": true
}


I am stack at the moment ,tried this but not producing expected results

{Items?.menu_items?.map((items,index)=>(
<div className='mb-8'>

                                {items?.categorys.map(c=&gt;(
&lt;&gt;
{c.category_public_id===items?.categorys[0]?.category_public_id &amp;&amp; (
&lt;&gt;
&lt;h2 className=&quot;text-lg font-semibold text-slate-900 py-2&quot;&gt;{c.category_name}&lt;/h2&gt;

))}

</div>

))}


</details>
# 答案1
**得分**: 0
我认为从类别开始而不是项目可能是一个不错的方法。也许将所有类别放入一个数组中，然后按类别进行映射。
```jsx
const categories = ["a", "b", "c"];
return (
categories.map(category => (
<ul className="a">
{Items.map(item => {
return item.category === category ? <li>{item.whateverYouNeed}</li> : null;
})}
</ul>
))
)

或者你可以再创建一个组件来拆分它。创建一个CategoryBlock组件，它接受一个要显示的项目数组，然后这样做：

const CategoryBlock = ({ elements }) => {
  return (
    <div>
      {elements.map(e => (
        <li>{e.whateverYouWant}</li>
      ))}
    </div>
  );
};

categories.map(category => (
  <CategoryBlock elements={items.filter(item => item.category === category)} />
))

从你的获取响应中看，似乎你的类别是数据库中的一个单独文档或表，所以获取所有类别不会成为问题。

英文:

I'm thinking that starting off from categories rather then items would be good approach. Maybe get all categories in an array and map by them.

const categories = [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;]
return ( categories.map( category =&gt; &lt;ul className = &quot;a&quot;&gt; {Items.map( item =&gt; {item.category === category ? &lt;li&gt; {item.whateverYouNeed} &lt;/li&gt;})}
&lt;/ul&gt; ) )

Alternatevly you can break it up with one more component. Make a categoryBlock <br> const CategoryBlock = ({elements}) => { return (<div> { elements.map( e => <li>{e.whateverYouWant}</li> ) }</div>) <br>which takes in an array of items you want to display component and then do

categories.map( category =&gt; &lt;CategoryBlock elements = {items.filter( item =&gt; item.category === category )}/&gt; )

From your fetch response it seems like you have categories as a seperate document or table in your db so getting all the categories wouldn't be a problem

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

How can i display items based on categories they belong to in a list in react

问题

Index was outside the bounds of the array

How to build a Pandas Dataframe with a Numpy Array from Imported CSV data with multiple numbers

Bull.js在NestJS中与webpack一起无法获取导出的函数。

`useEffect`中的`location.state`在组件的初始渲染时未被触发。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论