blocks|key|1232560|text|关键是使数据处于可管理的状态。在这里，我创建了一个对象，其中键是节名，值是包含节名的对象，以及一个项数组。然后，您可以使用Object.values提取值，为您提供一个可以正确迭代的对象数组。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1232561|​|1232562|function+Example({+menu+})+{

++//+`reduce`+over+the+menu+array+to+create+an+object
++//+identified+by+a+section+name+key.+The+object+will
++//+have+a+section+name,+and+an+array+of+items+
++const+sections+=+menu.reduce((acc,+item)+=>+{
++++const+{+menuSections:+[{+name+}],+...rest+}+=+item;
++++acc[name]+=+acc[name]+%7C%7C+{+name,+items:+[]+};
++++acc[name].items.push(rest);
++++return+acc;
++},+{});
++
++//+Get+the+array+of+objects+(values)+from+the
++//+the+sections+object+we+created,+and+`map`+over+it
++//+creating+a+new+section+for+each+object+in+the+array
++return+(
++++<main>
++++++<section>
++++++++{Object.values(sections).map(data+=>+{
++++++++++return+<Section+section={data}+/>;
++++++++})}
++++++</section>
++++</main>
++);

}

//+Add+the+name,+and+add+a+list.+Iterate+over+the
//+items+array+to+produce+a+sorted+list+of+items
function+Section({+section+})+{
++return+(
++++<section>
++++++<p+className="sectionName">{section.name}</p>
++++++<ul>
++++++++{section.items
++++++++++.sort((a,+b)+=>+a.name.localeCompare(b.name))
++++++++++.map(item+=>+<Item+item={item}+/>)}
++++++</ul>
++++</section>
++);
}

//+Returns+a+list+item
function+Item({+item+})+{
++return+<li>{item.name}</li>;
}

const+menu=[{category:"FOOD",name:"Canape+Two",menuSections:[{name:"Package"}]},{category:"FOOD",name:"Canape+One",menuSections:[{name:"Package"}]},{category:"DRINK",name:"Package+One",menuSections:[{name:"Drink+Packages"}]}];

ReactDOM.render(
++<Example+menu={menu}+/>,
++document.getElementById('react')
);|code-block|syntax|javascript|1232563|.sectionName+{+color:+darkred;+font-weight:+600;+}|1232564|<script+src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script+src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div+id="react"></div>|1232565|1232566|补充文件|1232567|解构分配|unordered-list-item|1232568|localeCompare|1232569|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values|1|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment|2|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare^0|1P|D|1P|D|0|0|0|0|0|0|0|0|0|4|1|0|0|D|0|D|2|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|F|3|G|5|6|7|1G|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1H|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1I|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|J|7|1J|8|@]|D|@]|E|$K|L]]|$1|Q|3|G|5|6|7|1K|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1L|8|@]|D|@]|E|$]]|$1|T|3|U|5|V|7|1M|8|@]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|W|3|X|5|V|7|1Q|8|@$9|1R|A|1S|B|C]]|D|@$9|1T|A|1U|1|1V]]|E|$]]|$1|Y|3|-4|5|6|7|1W|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15]]|16|$5|11|12|13|E|$14|17]]|18|$5|11|12|13|E|$14|19]]]]

<p>The key is to get your data into a manageable state. Here I'm creating an object where the keys are the section name, and the value is an object containing the section name, and an array of items. You can then extract the values using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values" rel="nofollow noreferrer"><code>Object.values</code></a> to give you an array of objects that you can iterate over properly.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function Example({ menu }) {

  // `reduce` over the menu array to create an object
  // identified by a section name key. The object will
  // have a section name, and an array of items 
  const sections = menu.reduce((acc, item) =&gt; {
    const { menuSections: [{ name }], ...rest } = item;
    acc[name] = acc[name] || { name, items: [] };
    acc[name].items.push(rest);
    return acc;
  }, {});
  
  // Get the array of objects (values) from the
  // the sections object we created, and `map` over it
  // creating a new section for each object in the array
  return (
    &lt;main&gt;
      &lt;section&gt;
        {Object.values(sections).map(data =&gt; {
          return &lt;Section section={data} /&gt;;
        })}
      &lt;/section&gt;
    &lt;/main&gt;
  );

}

// Add the name, and add a list. Iterate over the
// items array to produce a sorted list of items
function Section({ section }) {
  return (
    &lt;section&gt;
      &lt;p className="sectionName"&gt;{section.name}&lt;/p&gt;
      &lt;ul&gt;
        {section.items
          .sort((a, b) =&gt; a.name.localeCompare(b.name))
          .map(item =&gt; &lt;Item item={item} /&gt;)}
      &lt;/ul&gt;
    &lt;/section&gt;
  );
}

// Returns a list item
function Item({ item }) {
  return &lt;li&gt;{item.name}&lt;/li&gt;;
}

const menu=[{category:"FOOD",name:"Canape Two",menuSections:[{name:"Package"}]},{category:"FOOD",name:"Canape One",menuSections:[{name:"Package"}]},{category:"DRINK",name:"Package One",menuSections:[{name:"Drink Packages"}]}];

ReactDOM.render(
  &lt;Example menu={menu} /&gt;,
  document.getElementById('react')
);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.sectionName { color: darkred; font-weight: 600; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
&lt;div id="react"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>Additional documentation</p>
<ul>
<li><p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" rel="nofollow noreferrer">Destructuring assignment</a></p>
</li>
<li><p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare" rel="nofollow noreferrer"><code>localeCompare</code></a></p>
</li>
</ul>


blocks|key|331651|text|首先，您需要根据您的需求创建json，然后您需要呈现数据，如下面的代码所示，在这里您可以看到实例化|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|331652|import+React,+{+useEffect,+useState+}+from+"react";

export+default+function+App()+{

++const+[arr,+setArr]+=+useState([]);

++const+data+=+[
++++{
++++++category:+"FOOD",
++++++name:+"Canape+Two",
++++++menuSections:+[
++++++++{
++++++++++name:+"Package",
++++++++},
++++++],
++++},
++++{
++++++category:+"FOOD",
++++++name:+"Canape+One",
++++++menuSections:+[
++++++++{
++++++++++name:+"Package",
++++++++},
++++++],
++++},
++++{
++++++category:+"DRINK",
++++++name:+"Package+One",
++++++menuSections:+[
++++++++{
++++++++++name:+"Drink+Packages",
++++++++},
++++++],
++++},
++];

++useEffect(()+=>+{
++++let+newArr+=+[];
++++let+duplicates+=+[];
++++let+obj+=+{};
++++const+sortedData+=+data.sort((a,+b)+=>+a.name.localeCompare(b.name));
++++sortedData.forEach((item)+=>+{
++++++obj+=+{
++++++++category:+item.category,
++++++++name:+item.name,
++++++};
++++++item.menuSections.forEach((item1)+=>+{
++++++++if+(!duplicates.includes(item1.name))+{
++++++++++duplicates.push(item1.name);
++++++++++obj+=+{+...obj,+menuSection:+item1.name+};
++++++++}+else+{
+++++++++++obj+=+{+...obj,+menuSection:+""+};
++++++++}
++++++++newArr.push(obj);
++++++});
++++});
++++setArr(newArr);
++},+[])

++return+(
++++<div+className="App">
++++++{arr.map((menu)+=>+(
++++++++<>
++++++++++<p>{menu.menuSection}</p>
++++++++++<p>--+{menu.name}</p>
++++++++</>
++++++))}
++++</div>
++);
}|code-block|syntax|javascript|331653|entityMap|0|LINK|mutability|MUTABLE|url|https://codesandbox.io/s/elated-framework-q9ovk3?file=/src/App.js^0|1A|3|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>First you need to create the json as per your requirement and then you need to render the data, as you can see the below code, here you can see the <a href="https://codesandbox.io/s/elated-framework-q9ovk3?file=/src/App.js" rel="nofollow noreferrer">live example</a></p>
<pre><code>import React, { useEffect, useState } from &quot;react&quot;;

export default function App() {

  const [arr, setArr] = useState([]);

  const data = [
    {
      category: &quot;FOOD&quot;,
      name: &quot;Canape Two&quot;,
      menuSections: [
        {
          name: &quot;Package&quot;,
        },
      ],
    },
    {
      category: &quot;FOOD&quot;,
      name: &quot;Canape One&quot;,
      menuSections: [
        {
          name: &quot;Package&quot;,
        },
      ],
    },
    {
      category: &quot;DRINK&quot;,
      name: &quot;Package One&quot;,
      menuSections: [
        {
          name: &quot;Drink Packages&quot;,
        },
      ],
    },
  ];

  useEffect(() =&gt; {
    let newArr = [];
    let duplicates = [];
    let obj = {};
    const sortedData = data.sort((a, b) =&gt; a.name.localeCompare(b.name));
    sortedData.forEach((item) =&gt; {
      obj = {
        category: item.category,
        name: item.name,
      };
      item.menuSections.forEach((item1) =&gt; {
        if (!duplicates.includes(item1.name)) {
          duplicates.push(item1.name);
          obj = { ...obj, menuSection: item1.name };
        } else {
           obj = { ...obj, menuSection: &quot;&quot; };
        }
        newArr.push(obj);
      });
    });
    setArr(newArr);
  }, [])

  return (
    &lt;div className=&quot;App&quot;&gt;
      {arr.map((menu) =&gt; (
        &lt;&gt;
          &lt;p&gt;{menu.menuSection}&lt;/p&gt;
          &lt;p&gt;-- {menu.name}&lt;/p&gt;
        &lt;/&gt;
      ))}
    &lt;/div&gt;
  );
}
</code></pre>


<p>I have the following data:</p>
<pre class="lang-js prettyprint-override"><code>[
    {
        category: 'FOOD',
        name: 'Canape Two',
        menuSections: [
            {
                name: 'Package',
            },
        ],
    },
    {
        category: 'FOOD',
        name: 'Canape One',
        menuSections: [
            {
                name: 'Package',
            },
        ],
    },
    {
        category: 'DRINK',
        name: 'Package One',
        menuSections: [
            {
                name: 'Drink Packages',
            },
        ],
    },
]
</code></pre>
<p>I want to be able to render the above data in React in the following way:</p>
<pre><code>Package (Name of Section)
 - Canape One (Name of Menu Item)
 - Canape Two (Name of Menu Item)

Drink Packages (Name of Section
 - Package One (Name of Menu Item)
</code></pre>
<p>Each Menu Item might also have a subitem in the future.
I don't have a clear idea on how to achieve this. Your help would be appreciated.</p>


Trying to filter an array of objects

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有以下数据：[    {        category: 'FOOD',        name: 'Canape Two',        menuSections: [            {                name: 'Package',            },        ],   ...

问试图过滤对象数组
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问试图过滤对象数组EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问试图过滤对象数组
EN