如何在“反应”中将特定父项下的项分组？
如何在“反应”中将特定父项下的项分组？
提问于 2022-05-20 02:52:36
我有一个groups API，它有id和group_name字段。还有另一个training API给了我training_name和training_group_id。training API中的每一次培训都链接到一个组。
目前关于UI - Group 1 -培训1 x Group 2 -培训2 x Group 2 -培训3 Group 2 -培训4
有没有一种方法，我可以通过分组训练，有共同的group_name出现在一个group_name下，而不重复，如上面的输出所示？
用户界面的预期产出- Group 1 -培训1\x{e76f} Group 2 -培训2，培训3，培训4
密码-
function TileViewNew() {
const { currentUserTrainings, trainingGroups } = useContext(MyContext);
const renderTrainingGroupName = training => {
const trainingGroupName = trainingGroups.find(group => {
return group.id === training;
});
return trainingGroupName.group_name;
};
return (
<Grid>
{currentUserTrainings.map(({ training_name, training_group }) => (
<>
<Grid>
<strong>{renderTrainingGroupName(training_group)}</strong>
</Grid>
{training_name}
</>
))}
</Grid>
);
}
export default TileViewNew;回答 2
Stack Overflow用户
回答已采纳
发布于 2022-05-20 03:41:07
也许您需要构建一个新的数据结构。
以实现您想要的呈现
因为UI =fn(数据)
我希望这对你有帮助
import { type FC, useState, useEffect } from 'react';
const currentUserTrainings = [
{
training_name: 'Training 1',
training_group: 1,
},
{
training_name: 'Training 2',
training_group: 2,
},
{
training_name: 'Training 3',
training_group: 2,
},
{
training_name: 'Training 4',
training_group: 2,
},
];
const trainingGroups = [
{
group_name: 'Group 1',
group_id: 1,
},
{
group_name: 'Group 2',
group_id: 2,
},
];
export const TileViewNew: FC = () => {
const [result, setResult] = useState({});
useEffect(() => {
const targetDate = currentUserTrainings.map((item) => {
const group = trainingGroups.find((group) => group.group_id === item.training_group);
return {
...item,
group_name: group.group_name,
};
});
const targetResult = {};
targetDate.forEach((item) => {
targetResult[item.group_name] = targetResult[item.group_name] || [];
targetResult[item.group_name].push(item);
});
// console.log(targetResult);
setResult(targetResult);
}, []);
return (
<>
{Object.keys(result).map((k) => (
<div key={k}>
<b>{k}</b>
{result[k].map((c) => (
<span key={c.training_name}>{c.training_name}</span>
))}
</div>
))}
</>
);
};
export default TileViewNew;Stack Overflow用户
发布于 2022-05-20 03:57:17
您基本上可以以这种方式转换从api获得的数据。
const currentUserTrainings = [{training_name: 'Training 1',training_group_id: 1,},{training_name: 'Training 2',training_group_id: 2,},{training_name: 'Training 3',training_group_id: 2,},{training_name: 'Training 4',training_group_id: 2,},];
const trainingGroups = [{group_name: 'Group 1',group_id: 1,},{group_name: 'Group 2',group_id: 2,},];
// group trainings by group id
let transformedTraining = currentUserTrainings.reduce((acc,curr) => {
let id = curr.training_group_id
acc[id] = acc[id] || []
acc[id].push(curr)
return acc
}, {})
// loop over groups to show final output
trainingGroups.forEach((curr)=>{
let name = curr.group_name
let id = curr.group_id
let trainings = transformedTraining[id]?.map(v => v.training_name).join(',')
console.log(name, trainings)
})
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72313062
复制相关文章
相似问题
腾讯云开发者
