Javascript 如何更新数组中超集的ES6语法

我有一段ES6 React代码，它将一组小图标填充到页面上

const MiniIcons = ({miniicons}) => ( <div id="application"> {
      miniicons.map(miniicon => ( <MiniIcon key={minicon.id} id={miniicon.id} title={miniicon.name} handleOpenButton={this.handleMiniiconOpen.bind(this)} /> )
    )} </div> );

这样的列表如下：

<div id="application">
  <div class="minicion"></div>
  <div class="minicion"></div>
  <div class="minicion"></div>
</div>

apps [ x.application ].push ( Object.assign ( {}, x ) );

然而，其中一些小图标是超集应用程序的一部分。我对ES6语法非常陌生，因此如何修改它，以便为应用程序不同的每个元素创建一个周围的div，对于上面的示例：

<div id="application1">
  <div class="minicion"></div>
</div>
<div id="application2">
  <div class="minicion"></div>
  <div class="minicion"></div>
</div>

将使用的阵列分组，然后渲染它们

render() {
  const groupedIcons = _.groupBy(miniicons, 'application')
  return Object.keys(groupedIcons).map((applicationId) => {
    return (
      <div id={applicationId}>
        {groupedIcons[applicationId].map(miniicon => (
          <MiniIcon
            key={minicon.id}
            id={miniicon.id}
            title={miniicon.name}
            handleOpenButton={this.handleMiniiconOpen.bind(this)}
          />
        )}
      </div>
    )
  })
}

render（）{
const groupedIcons=u.groupBy（小图标，“应用程序”）
返回Object.keys（groupedIcons.map）（（applicationId）=>{
返回(
{groupedIcons[applicationId].map（迷你图标=>(
)}
)
})
}

这可能是一个开始（香草ES6没有LIB）

如果我理解这个问题，那么您可以创建一个对象，该对象包含按应用程序属性值分组的“应用程序”数组

{ 
  "1" : [ { application : 1, ... }, { application : 1, ... } ], 
  "2" : [ { application : 2, ...  } ] 
} ;

一旦你得到了它，你可以看到你所需要做的就是迭代这个对象

比如：

for ( let arr in top_level_obj ) {
   ...create div
   arr.forEach ( obj => { 
      ...add obj to div you just created
   }); 
}

（或者你的框架如何运作）

以下是创建数组对象的代码：

let arr = [
  {"id":"1", "name":"chicken", "application":"1"},
  {"id":"3", "name":"nuggets", "application":"1"},
  {"id":"8", "name":"fries", "application":"2"}
];

let apps = {};
arr.forEach ( x => {
    if ( ! ( x.application in apps ) ) {
        apps [ x.application ] = [];
    }

    apps [ x.application ].push ( x );
} );

console.log ( apps );

从那里应该很容易得到你想要的

应用程序VAL可以是任何内容、数字或任何内容，它们不需要以任何顺序排列，等等

注意：您可能希望复制正在渲染的项目（否则它们将引用原始数组中的对象，根据您所做的操作，这些对象可能不稳定），您可以这样做：

<div id="application">
  <div class="minicion"></div>
  <div class="minicion"></div>
  <div class="minicion"></div>
</div>

apps [ x.application ].push ( Object.assign ( {}, x ) );

---

您需要按应用程序字段对数组进行分组，然后映射键以创建

项，并在每个值上创建嵌套映射（这是一个小图标数组）创建你的

。你可以使用

reduce

进行分组，但是像lodash这样的库会使分组更方便。是的，这里：

小图标。reduce（（groups，curr）=>（{…groups，[curr.application]：[…（groups[curr.application]| |[]），{}）

。这与ES6或（React-specific？）无关语法，您只需要一个分组算法。看起来不错，但我仍然可以将对象.keys…等映射到react render方法中的“const MiniIcons=”并引用“”？是的，您可以。我更改了答案。如果我将const Miniviews=（{reducedArry}）=>{return Object.keys…等与您所放置的内容一起设置，然后再设置console.log（Miniviews），它实际上是以类型函数的形式返回函数，而不是函数的结果？首先，这与问题有关吗？同样，当您执行

const Miniviews=（）=>{…}

时，它将Miniviews声明为函数。要获得输出，您需要调用函数

const miniViewsArray=Miniviews（）

。