获取返回功能以在网页上显示分类结果 [英] Get return function to display the categorized results on the web page

问题描述

我有以下Alignments.js react组件，它们使用新的useState和useEffect React钩子，顺便说一句。它会显示对齐方式列表：

I have the following Alignments.js react component using the new useState and useEffect React hooks, which works great by the way. It displays a list of alignments:

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）

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。

Okay, so now that I've fetched these alignments from my database, and they're sitting in this items array, I want to put them in categories based on a column in the table called 'aligngrp2'. Where do I add the following code so that it runs after the fetch has completed?

    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一个，正好是我希望它在网页上显示的方式：

I don't believe I can just add this arbitrarily to the Alignments component (which is what I did just to see a console.log of it). It shows 3 arrays, one for each aligngrp2, just the way I want it to be displayed on the web page:

{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中的return函数，以显示由aligngrp2分组的路线。如果我将items.map更改为cats.map，则会出现错误，表明cats.map不是函数。我尝试了不同的代码来尝试显示此代码，但无济于事。我是否要取消设置项目，然后以某种方式重新添加新分组的项目？ 无法弄清楚如何获取返回函数以显示新的路线分组列表。

推荐答案

您可以使用此功能：

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

然后可以得到结果： groupedData = groupBy（items，'aligngrp2'）

这篇关于获取返回功能以在网页上显示分类结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！