Получить функцию возврата, чтобы отобразить результаты по категориям на веб-странице

Question

У меня есть следующие выравнивания. 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 (items)

(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, …}

Хорошо, теперь я получил эти выравнивания из своей базы данных, и они сидя в этом массиве элементов, я хочу поместить их в категории на основе столбца в таблице, называемого «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

Вы можете использовать Лода sh,

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

ОБНОВЛЕНИЕ

Я ценю решение @ Maria-Elena, это не позволяет использовать огромную библиотеку как loda sh, если она работает, я советую использовать ее вместо моего решения

Пример кода для отображения, я не пробовал код:

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> ) }