arrays - 获取返回函数,在网页上显示分类结果
问题描述
我有以下 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;
控制台日志(项目)
(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 不是函数。我尝试了不同的代码来尝试显示这一点,但无济于事。我是否取消设置项目,然后以某种方式重新添加新分组的项目? 无法弄清楚如何让返回函数显示新的分组对齐列表。
解决方案
你可以使用这个功能:
const groupBy = (items, key) =>
items.reduce(
(result, item) => ({
...result,
[item[key]]: [...(result[item[key]] || []), item],
}),
{},
)
然后你可以得到结果:groupedData = groupBy(items, 'aligngrp2')
推荐阅读
- html - 如何防止用户在浏览器中篡改 HTML 表单?
- python - 如何用 groupby 替换异常值?
- r - 模型未能收敛 (lme4)
- ruby-on-rails - 看看 created_at 在 Rails 中是否已经过了 24 小时
- ssl - Azure Function Apps 如何处理客户端证书身份验证?
- javascript - 测试具有内部功能的功能
- netty - tcp 握手中 syn/ack 数据包中的 Channeloption.ip-tos-bit 设置不正确
- spring - 在 spring 中从多线程 kafkalisteners 中消费 onetopic
- sphinx - 狮身人面像 / Manticore - 以一个普通索引为基础?
- google-sheets - ARRAY 公式查找最后一行以包含 Google 表格中的值