Javascript js中的数组过滤与动态映射

我有这样一个json：

[
  {
    "part": "LM",
    "section": "021",
    "column": "001",
    "description": "Descrizione attività/passività",
    "type": "NUM"
  },
  {
    "part": "LM",
    "section": "021",
    "column": "002",
    "description": "Assenza cause Ostative Applicazione Regime",
    "type": "CB"
  },
  {
    "part": "LM",
    "section": "042",
    "column": "001",
    "description": "Differenza su reddito",
    "type": "NUM"
  },
  {
    "part": "LM",
    "section": "050",
    "column": "006",
    "description": "Perdite non compensate - Eccedenza 2018",
    "type": "NUM"
  }
]

我想为分区道具绘制分割的项目。 方面输出为：

      <div>section 021
        <p>column 001</p>
        <p>column 002</p>
      </div>

      <div>section 042
      <p>column 001</p>
      </div>

      <div>section 050
      <p>column 006</p>
      </div>

第021节
第001列

第002栏

第042节
第001列

第050节
第006列

如何将截面道具作为过滤器参数动态传递

我试过这样的方法： obj.filter（（item）=>item.section==“021”）.map（（item）=>…可以工作，但我希望“021”对于对象中的每个值都是动态的

非常感谢各位

导出默认函数App（）{
export default function App() {
  const data = [
    {
      part: 'LM',
      section: '021',
      column: '001',
      description: 'Descrizione attività/passività',
      type: 'NUM'
    },
    {
      part: 'LM',
      section: '021',
      column: '002',
      description: 'Assenza cause Ostative Applicazione Regime',
      type: 'CB'
    },
    {
      part: 'LM',
      section: '042',
      column: '001',
      description: 'Differenza su reddito',
      type: 'NUM'
    },
    {
      part: 'LM',
      section: '050',
      column: '006',
      description: 'Perdite non compensate - Eccedenza 2018',
      type: 'NUM'
    }
  ];

  const output = Object.values(
    data.reduce((b, a) => {
      if (b.hasOwnProperty(a.section)) b[a.section].columns.push(a.column);
      else {
        a.columns = [a.column];
        b[a.section] = a;
      }
      return b;
    }, {})
  );
  // console.log(output);

  return (
    <div>
      {output.map(obj => (
        <div>
          {obj.section}
          <ul>
            {obj.columns.map(col => (
              <li> {col} </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

常数数据=[
{
部分：‘LM’，
“021”节，
列：“001”，
description:“descripione attivitá/passititá”，
键入：“NUM”
},
{
部分：‘LM’，
“021”节，
列：“002”，
描述：“Assenza事业持续应用制度”，
类型：“CB”
},
{
部分：‘LM’，
“042”节，
列：“001”，
描述：“Differiza su reddito”，
键入：“NUM”
},
{
部分：‘LM’，
“050”节，
列：“006”，
描述：“Perdite非补偿-2018年Eccedenza”，
键入：“NUM”
}
];
常量输出=Object.values(
数据减少（（b，a）=>{
if（b.hasOwnProperty（a.section））b[a.section].columns.push（a.column）；
否则{
a、 columns=[a.column]；
b[a.段]=a；
}
返回b；
}, {})
);
//控制台日志（输出）；
返回(
{output.map（obj=>(
{obj.section}

{obj.columns.map（col=>(
{col}
))}

))}
);
}

---

查看此处：

这是否回答了您的问题？我认为代码有一些错误：）reduce是正确的，但是映射到react组件我需要test@sedprc-这是react组件还是只是javascript？reactcomponent@sedprc-更新并可测试@stackblitz链接