首页 > 解决方案 > 将数据库中的列表分成多个部分(React)

问题描述

我目前正在努力解决这个问题。希望你能帮助我:)

数据是从数据库中选择的,它返回结构如下的对象:

object = {
  id: 4,
  name: "Banana",
  idParent: 1 
}

idParent 将是产品的部分。

有很多产品和很多部分,所以很简单

const sectionOne = [];

ObjectList.map(e => {
  if(e.idParent === 1) {
    sectionOne.push(e);
  }
})

可能是错误的,因为将来应该可以添加其他 idParents,并且在这种情况下代码不应该需要一些返工。

假设有 30 个对象,10 个 idParent = 1,15 个 idParent = 2,最后 5 个 idParent = 3。

如何在不为每个部分创建变量的情况下将整个列表分成这些部分?

谢谢您的帮助 :)

标签: arraysreactjsdictionaryobjectvariables

解决方案


我相信您在这里需要的是按 .map对列表的值进行分组idParent

例子:

const objectList = [{
  id: 4,
  name: "Banana",
  idParent: 1
},
  {
    id: 3,
    name: "apple",
    idParent: 2
  },
  {
    id: 5,
    name: "orange",
    idParent: 2
  }];

const groupBy = (array, key) => {
  return array.reduce((accumlator, value) => {
    (accumlator[value[key]] = accumlator[value[key]] || []).push(value);
    return accumlator;
  }, new Map());
};

const resultMap = groupBy(objectList, "idParent");

console.log(resultMap);
enter code here

地图中的子数组也可以像这样访问:

const groupWihtIdParen1 = resultMap[1];
// or like this
const groupWithIdParent2 = resultMap.get(2);
``

推荐阅读