我需要使用reactjs获得coulmn-wise重复计数

---

我有表中所示的数据，我需要使用ReactJs获得列式重复的计数。

嗨，请检查下面的示例。我使用了

材质ui

。我还附加了输出屏幕

以下是工作示例

import React from 'react';
import {makeStyles} from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

function createRow(id, name, city, dateofbirth, school, klass) {
    return {id, name, city, dateofbirth, school, klass};
}

function showNameCount(data) {
    let unique = data.map(item => item.name).filter((value, index, self) => self.indexOf(value) === index);

    let divs = [];
    unique.map(u => {
        divs.push(<div>{u}: {data.filter(d => d.name === u).length}</div>);
    });
    return divs;
}

const rows = [
    createRow(1, 'John', 'newyork', '15-Aug-98', 'newyork university', 'degree'),
    createRow(2, 'Mary', 'chicago', '28-Jun-97', 'newyork university', 'degree'),
    createRow(3, 'John', 'newyork', '12-May-98', 'newyork university', 'degree'),
    createRow(4, 'Hary', 'chicago', '15-Aug-98', 'newyork university', 'degree'),
    createRow(5, 'Mary', 'newyork', '28-Jun-97', 'newyork university', 'degree'),
    createRow(6, 'John', 'newyork', '12-May-98', 'newyork university', 'degree'),
    createRow(7, 'Hary', 'newyork', '15-Aug-98', 'newyork university', 'degree'),
    createRow(8, 'Stella', 'chicago', '28-Jun-97', 'newyork university', 'degree'),
    createRow(9, 'John', 'newyork', '12-May-98', 'newyork university', 'degree'),
    createRow(10, 'Stella', 'chicago', '12-May-98', 'newyork university', 'degree')
];

export default function TableWithFooter() {
    return (
        <TableContainer component={Paper}>
            <Table aria-label="spanning table">
                <TableHead>
                    <TableRow>
                        <TableCell>Id</TableCell>
                        <TableCell>Name</TableCell>
                        <TableCell>City</TableCell>
                        <TableCell>Date of Birth</TableCell>
                        <TableCell>School</TableCell>
                        <TableCell>Class</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {rows.map((row) => (
                        <TableRow key={row.id}>
                            <TableCell>{row.id}</TableCell>
                            <TableCell>{row.name}</TableCell>
                            <TableCell>{row.city}</TableCell>
                            <TableCell>{row.dateofbirth}</TableCell>
                            <TableCell>{row.school}</TableCell>
                            <TableCell>{row.klass}</TableCell>
                        </TableRow>
                    ))}
                    <TableRow>
                        <TableCell/>
                        <TableCell>
                            {
                                showNameCount(rows)
                            }
                        </TableCell>
                        <TableCell rowSpan={4}/>
                    </TableRow>
                </TableBody>
            </Table>
        </TableContainer>
    );
}

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Table”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableContainer”导入TableContainer；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Paper”导入纸张；
函数createRow（id、名称、城市、出生日期、学校、klass）{
返回{id、姓名、城市、出生日期、学校、klass}；
}
函数showNameCount（数据）{
让unique=data.map（item=>item.name）.filter（（value，index，self）=>self.indexOf（value）==index）；
设divs=[]；
唯一的.map（u=>{
push（{u}:{data.filter（d=>d.name==u.length}）；
});
返回divs；
}
常量行=[
createRow（1，“约翰”、“纽约”、“98年8月15日”、“纽约大学”、“学位”），
createRow（2，“玛丽”、“芝加哥”、“1997年6月28日”、“纽约大学”、“学位”），
createRow（3，“约翰”、“纽约”、“1998年5月12日”、“纽约大学”、“学位”），
createRow（4，“Hary”、“芝加哥”、“1998年8月15日”、“纽约大学”、“学位”），
createRow（5，“玛丽”，“纽约”，“1997年6月28日”，“纽约大学”，“学位”），
createRow（6，“约翰”、“纽约”、“1998年5月12日”、“纽约大学”、“学位”），
createRow（7，‘Hary’、‘纽约’、‘98年8月15日’、‘纽约大学’、‘学位’），
createRow（8，“斯特拉”、“芝加哥”、“1997年6月28日”、“纽约大学”、“学位”），
createRow（9，‘约翰’、‘纽约’、‘98年5月12日’、‘纽约大学’、‘学位’），
createRow（10，'斯特拉'，'芝加哥'，'1998年5月12日'，'纽约大学'，'学位'）
];
导出默认函数TableWithFooter（）{
返回(
身份证件
名称
城市
出生日期
学校
等级
{rows.map（（row）=>(
{row.id}
{row.name}
{row.city}
{row.dateofbirth}
{row.school}
{row.klass}
))}
{
showNameCount（行）
}
);
}

您好，请检查下面的示例。我使用了

材质ui

。我还附加了输出屏幕

以下是工作示例

import React from 'react';
import {makeStyles} from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

function createRow(id, name, city, dateofbirth, school, klass) {
    return {id, name, city, dateofbirth, school, klass};
}

function showNameCount(data) {
    let unique = data.map(item => item.name).filter((value, index, self) => self.indexOf(value) === index);

    let divs = [];
    unique.map(u => {
        divs.push(<div>{u}: {data.filter(d => d.name === u).length}</div>);
    });
    return divs;
}

const rows = [
    createRow(1, 'John', 'newyork', '15-Aug-98', 'newyork university', 'degree'),
    createRow(2, 'Mary', 'chicago', '28-Jun-97', 'newyork university', 'degree'),
    createRow(3, 'John', 'newyork', '12-May-98', 'newyork university', 'degree'),
    createRow(4, 'Hary', 'chicago', '15-Aug-98', 'newyork university', 'degree'),
    createRow(5, 'Mary', 'newyork', '28-Jun-97', 'newyork university', 'degree'),
    createRow(6, 'John', 'newyork', '12-May-98', 'newyork university', 'degree'),
    createRow(7, 'Hary', 'newyork', '15-Aug-98', 'newyork university', 'degree'),
    createRow(8, 'Stella', 'chicago', '28-Jun-97', 'newyork university', 'degree'),
    createRow(9, 'John', 'newyork', '12-May-98', 'newyork university', 'degree'),
    createRow(10, 'Stella', 'chicago', '12-May-98', 'newyork university', 'degree')
];

export default function TableWithFooter() {
    return (
        <TableContainer component={Paper}>
            <Table aria-label="spanning table">
                <TableHead>
                    <TableRow>
                        <TableCell>Id</TableCell>
                        <TableCell>Name</TableCell>
                        <TableCell>City</TableCell>
                        <TableCell>Date of Birth</TableCell>
                        <TableCell>School</TableCell>
                        <TableCell>Class</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {rows.map((row) => (
                        <TableRow key={row.id}>
                            <TableCell>{row.id}</TableCell>
                            <TableCell>{row.name}</TableCell>
                            <TableCell>{row.city}</TableCell>
                            <TableCell>{row.dateofbirth}</TableCell>
                            <TableCell>{row.school}</TableCell>
                            <TableCell>{row.klass}</TableCell>
                        </TableRow>
                    ))}
                    <TableRow>
                        <TableCell/>
                        <TableCell>
                            {
                                showNameCount(rows)
                            }
                        </TableCell>
                        <TableCell rowSpan={4}/>
                    </TableRow>
                </TableBody>
            </Table>
        </TableContainer>
    );
}

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Table”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableContainer”导入TableContainer；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Paper”导入纸张；
函数createRow（id、名称、城市、出生日期、学校、klass）{
返回{id、姓名、城市、出生日期、学校、klass}；
}
函数showNameCount（数据）{
让unique=data.map（item=>item.name）.filter（（value，index，self）=>self.indexOf（value）==index）；
设divs=[]；
唯一的.map（u=>{
push（{u}:{data.filter（d=>d.name==u.length}）；
});
返回divs；
}
常量行=[
createRow（1，“约翰”、“纽约”、“98年8月15日”、“纽约大学”、“学位”），
createRow（2，“玛丽”、“芝加哥”、“1997年6月28日”、“纽约大学”、“学位”），
createRow（3，“约翰”、“纽约”、“1998年5月12日”、“纽约大学”、“学位”），
createRow（4，“Hary”、“芝加哥”、“1998年8月15日”、“纽约大学”、“学位”），
createRow（5，“玛丽”，“纽约”，“1997年6月28日”，“纽约大学”，“学位”），
createRow（6，“约翰”、“纽约”、“1998年5月12日”、“纽约大学”、“学位”），
createRow（7，‘Hary’、‘纽约’、‘98年8月15日’、‘纽约大学’、‘学位’），
createRow（8，“斯特拉”、“芝加哥”、“1997年6月28日”、“纽约大学”、“学位”），
createRow（9，‘约翰’、‘纽约’、‘98年5月12日’、‘纽约大学’、‘学位’），
createRow（10，'斯特拉'，'芝加哥'，'1998年5月12日'，'纽约大学'，'学位'）
];
导出默认函数TableWithFooter（）{
返回(
身份证件
名称
城市
出生日期
学校
等级
{rows.map（（row）=>(
{row.id}
{row.name}
{row.city}
{row.dateofbirth}
{row.school}
{row.klass}
))}
{
showNameCount（行）
}
);
}

不确定您想要什么。如果你问总ro