获取返回函数，在网页上显示分类结果

Question

我有以下 Alignments.js 使用新的 useState 和 useEffect React 钩子的反应组件，顺便说一句，效果很好。它显示对齐列表：

import React, {useState, useEffect} from 'react';
import './App.css';
import {Link} from 'react-router-dom';

function Alignments() {
  useEffect(() => {
    fetchItems();
  },[]);

  const [items, setItems] = useState([]);

  const fetchItems = async () => {
    const data = await fetch('http://localhost:3001/alignments');
    const items = await data.json();
    setItems(items);
    console.log(items);
  };

  return (
    <div>
      {items.map(item => (
        <ul align="left" key={item.id}>
          <h2><Link to={`/alignments/${item.alignment}`}> {item.alignment}</Link></h2>
        </ul>
      ))}
    </div>
  );
}

export default Alignments;

console.log(项目)

(30) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {id: 1, aligngrp1: "I124", aligngrp2: "I124", alignment: "I124", length: 9699.999985122007, …}
1: {id: 2, aligngrp1: "I124", aligngrp2: "Cross_Streets", alignment: "12th", length: 1535.818272652023, …}
2: {id: 3, aligngrp1: "I124", aligngrp2: "Cross_Streets", alignment: "13th", length: 391.437434891255, …}
3: {id: 4, aligngrp1: "I124", aligngrp2: "Cross_Streets", alignment: "4th", length: 1032.43200821333, …}
4: {id: 5, aligngrp1: "I124", aligngrp2: "Cross_Streets", alignment: "6th", length: 999.9999994234385, …}
27: {id: 28, aligngrp1: "I124", aligngrp2: "Ramps", alignment: "Ramp_O", length: 927.6421496634126, …}
28: {id: 29, aligngrp1: "I124", aligngrp2: "Ramps", alignment: "Ramp_P", length: 1418.010004687435, …}
29: {id: 30, aligngrp1: "I124", aligngrp2: "Ramps", alignment: "Ramp_R", length: 444.908879095785, …}

好的，现在我已经从我的数据库中获取了这些对齐，并且它们位于这个 items 数组中，我想根据表中名为“aligngrp2”的列将它们放入类别中。在哪里添加以下代码，以便在提取完成后运行？

    const cats = items.reduce((catsSoFar, { aligngrp2, alignment }) => {
      if (!catsSoFar[aligngrp2]) catsSoFar[aligngrp2] = [];
      catsSoFar[aligngrp2].push(alignment);
    return catsSoFar;
    }, {});
    console.log(cats);
  };

甚至更好，

const cats = _.groupBy(items, 'aligngrp2');

我不相信我可以随意将它添加到 Alignments 组件中（我只是为了查看它的 console.log 所做的）。它显示了 3 个数组，每个 aligngrp2 一个，这正是我希望它在网页上显示的方式：

{I124: Array(1), Cross_Streets: Array(12), Ramps: Array(17)}
I124: Array(1)
0: "I124"
length: 1
__proto__: Array(0)
Cross_Streets: Array(12)
0: "12th"
1: "13th"
2: "4th"
3: "6th"
length: 12
__proto__: Array(0)
Ramps: Array(17)
14: "Ramp_O"
15: "Ramp_P"
16: "Ramp_R"
length: 17
__proto__: Array(0)

现在修改 Alignments.js 中的返回函数以显示由 aligngrp2 分组的对齐。如果我将 items.map 更改为cats.map，则会给出一个错误，即cats.map 不是函数。我尝试了不同的代码来尝试显示这一点，但无济于事。我是否取消设置项目，然后以某种方式重新添加新分组的项目？ 无法弄清楚如何让返回函数显示新的分组对齐列表。

Answer 1

你可以使用这个功能：

 const groupBy = (items, key) =>
    items.reduce(
      (result, item) => ({
        ...result,
        [item[key]]: [...(result[item[key]] || []), item],
      }),
      {},
    )

那么你可以得到结果：groupedData = groupBy(items, 'aligngrp2')

Answer 2

你可以使用Lodash，

Let cats =  _.groupBy(items, item => item.aligngrp2);

更新

我很欣赏@Maria-Elena 的解决方案，它可以防止使用庞大的库作为 lodash，如果可行，我建议使用它而不是我的解决方案

要显示的示例代码，我没有尝试过代码：

cats.map((item, index) => { return ( <div key={index}> <strong>{item.aligngpr2}</strong> { Object.keys(item).map((key, i) => { return ( <ul ><li>{item[Key]}</li></ul> ) }) } </div> ) }